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蓝畅信息技术立场,转载请联系原作者。