Canvas API（畫(huà)布）是在HTML5中新增的標(biāo)簽用于在網(wǎng)頁(yè)實(shí)時(shí)生成圖像，并且可以操作圖像內(nèi)容，基本上它是一個(gè)可以用JavaScript操作的位圖（bitmap）。
Canvas 對(duì)象表示一個(gè) HTML 畫(huà)布元素 -<canvas>。它沒(méi)有自己的行為，但是定義了一個(gè) API 支持腳本化客戶(hù)端繪圖操作。
H5開(kāi)發(fā)使用 canvas 繪圖時(shí)，指定的 div 大小一定不要超過(guò)該 div 所能獲得的最大范圍，否則繪制的點(diǎn)會(huì)跟實(shí)際位置發(fā)生偏離。
例如
|
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 無(wú)法滿(mǎn)足，因此繪制線圖時(shí)，與實(shí)際鼠標(biāo)位置發(fā)生偏離。
本文來(lái)自網(wǎng)絡(luò)，經(jīng)授權(quán)后發(fā)布，本文觀點(diǎn)不代表Infocode藍(lán)暢信息技術(shù)立場(chǎng)，轉(zhuǎn)載請(qǐng)聯(lián)系原作者。
