回答編集履歴
1
SVGによる解決策を追加
test
CHANGED
|
@@ -7,3 +7,31 @@
|
|
|
7
7
|
- `canvas`要素に画像を描画し, その上に`strokeRect`で四角を描画する.
|
|
8
8
|
|
|
9
9
|
- 画像をインラインSVGで表示し, `rect`要素の位置を操作する.
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
> 赤い枠を動かす操作はありますか？
|
|
14
|
+
|
|
15
|
+
>> 表を表示した後ということですか？表示後はないです。
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
とのことでしたら, インラインSVGによる方法がシンプルで良いかと思います.
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
```HTML
|
|
24
|
+
|
|
25
|
+
<svg width="200px" height="200px" viewBox="0 0 300 400"><!--viewBoxには画像のサイズを指定する-->
|
|
26
|
+
|
|
27
|
+
<image xlink:href="a.jpg" width="100%" height="100%"/>
|
|
28
|
+
|
|
29
|
+
<rect x="50" y="100" width="50" height="100"
|
|
30
|
+
|
|
31
|
+
fill="none" stroke="red" stroke-width="2" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><!--枠の位置を指定する-->
|
|
32
|
+
|
|
33
|
+
<svg>
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
```
|