Canvas API（畫布）是在HTML5中新增的標簽用于在網頁實時生成圖像，并且可以操作圖像內容，基本上它是一個可以用JavaScript操作的位圖（bitmap）。
Canvas 對象表示一個 HTML 畫布元素 -<canvas>。它沒有自己的行為，但是定義了一個 API 支持腳本化客戶端繪圖操作。
H5開發使用 canvas 繪圖時，指定的 div 大小一定不要超過該 div 所能獲得的最大范圍，否則繪制的點會跟實際位置發生偏離。
例如
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled 1</title> <style type="text/css"> .style1 { ??font-size: x-small; } </style> </head> ?<body > ????<div style="margin:2%">????????????<div id="test" style="width:800px;height:800px;background-color:#cbdad0d9">????????????????????<canvas id="container" onmousemove="mousemove(event)" onmousedown="mousedown()" onmouseup="mouseup()"></canvas>????????????</div>????</div>????????<script type="text/javascript"> ????????var paint = false;????????var start = false;????????var canvas = document.getElementById("container");????????canvas.width = 800;????????canvas.height = 800;????????var offsetY = canvas.offsetTop;????????var offsetX = canvas.offsetLeft;????????var y;????????var x;????????var context = canvas.getContext("2d");????????????function mousemove(e) {????????????if (paint == true){????????????????if (start == false){????????????????????context.moveTo(0, 0);????????????????????start = true;????????????????} else {????????????????????context.moveTo(x, y);????????????????}????????????????x = e.pageX - offsetX;????????????????y = e.pageY - offsetY;????????????????context.lineTo(x, y);????????????????context.stroke();????????????}????????}????????????function mousedown(event) {????????????paint = true;????????????console.log("down")????????}????????????function mouseup(event) {????????????paint = false;????????????console.log("up")????????}????????</script></body> </html> |
上例中可以正確的繪制線圖。
如果更改為：
|
1
2
3
4
5
|
<div style="margin:20%">????????<div id="test" style="width:800px;height:800px;background-color:#cbdad0d9">????????????????<canvas id="container" onmousemove="mousemove(event)" onmousedown="mousedown()" onmouseup="mouseup()"></canvas>????????</div></div> |
由于 canvas 所需 width 800px 無法滿足，因此繪制線圖時，與實際鼠標位置發生偏離。
本文來自網絡，經授權后發布，本文觀點不代表Infocode藍暢信息技術立場，轉載請聯系原作者。
