需要注意的是id的值不能为空
五、canvas画布清空（实质：重新绘制）
相当于把需要的路径标识出来后面使用，非常方便。
结果图：
canvas只有一张画布，对之前任何一个路径作刷新，需要重绘所有受到影响的路径，因此，当需要重绘的动作越来越多时，就会对性能造成极大考验。作为HTML5的新宠儿，不应就此中道崩殂，我们也不想写如上略显累赘的代码。今天在查阅资料后，发现一个尚在讨论的新接口 addHitRegion() MDN，使用简单而且可以实现良好的交互效果，目前在chrome和firefox下测试可用（需要在chrome://flags中启用【实验性画布功能】或在firefox中输入about:config使canvas.hitregions.enabled值为true）
1 //获取鼠标指针坐标
2 function getMousePos(evt) {
3 var rect = document.getElementById('canvas').getBoundingClientRect();
4 return {
5 x: evt.clientX - rect.left,
6 y: evt.clientY - rect.top
7 };
8 }
9
10 document.getElementById(selector).addEventListener('click', function (evt) {
11 var mousePos = getMousePos(evt);
12 if (context.isPointInPath(mousePos.x, mousePos.y)) {
13 //重绘
14 }
15 }, false);
b、绘制三角形形状：
demo:
大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。(下方实例中的ctx即是)
然后，这样引用
<script> var linePaths =[[0,0],[100,130],[150,150],[200,300]]; var ctx=$('canvas')[0].getContext('2d'); function drawPath(){ //画线 ctx.beginPath(); ctx.globalAlpha = "0.5"; //透明度 for (var k = 0; k < linePaths.length; k ) { if (k == 0) { ctx.moveTo(linePaths[0][0],linePaths[0][1]); } else { ctx.lineTo(linePaths[k][0],linePaths[k][1]); } } ctx.lineWidth =4; //线宽 ctx.strokeStyle = "Green"; //颜色 ctx.stroke(); }; drawPath(); </script>
注意：该接口目前尚在实验中，在未来版本的浏览器中其语法和行为可能有所改变。未纳入标准之前，可以玩玩
a、使用canvas 元素来显示一个矩形
PS： 先列出提纲，内容待续。。。
1 ...
2 function draw () {
3 ...
4 }
5 function circle () {
6 ...
7 }
8
9 draw();
10 ctx.fill()
11 circle();
12 ctx.fill()
13
14 var fns = [draw,circle];
15 cvs.onmousemove = function (e) {
16 var x = e.offsetX, y = e.offsetY;
17 ctx.clearRect(0,0,400,300)
18 for(var i = fns.length;i--;) {
19 fns[i]();
20 if(ctx.isPointInPath(x,y)) {
21 ctx.fillStyle = "#f00"
22 } else {
23 ctx.fillStyle = "#000"
24 }
25 ctx.fill()
26 }
27 }
<canvas> 标签定义图形，比如图表和其他图像；<canvas> 标签只是图形容器，必须使用脚本来绘制图形。
四、使用路径path坐标点集绘制canvas
据我目前所知，canvas纳入标准的常用交互接口（可能也就这一个）是 isPointInPath() ，它可以判断js设置的事件条件是否处于当前绘图路径中，或者说最后一个路径，具体使用如下
一、canvas标签
1 try {
2 //id为空会报错
3 ctx.addHitRegion({ "id": "excited" });
4 } catch (e) {
5 alert("请在chrome://flags中启用【实验性画布功能】或在firefox中输入about:config使canvas.hitregions.enabled值为true以开启更多功能~~~///(^v^)\~~~");
6 }
值得注意的是，isPointInPath只能判断当前路径，不能一次性对canvas中所有图形路径进行查询判断，因而需要重绘。
绘图时在需要添加交互事件的路径中添加如下代码
PS:
由于canvas不保存绘图路径，绘完了就bia在页面上，成死的了，因此无法对最后一条路径之前的路径重新拿出来处理。那么传统方法如何处理？--重绘，再针对每一个绘图路径使用 isPointInPath() 判断，核心代码使用如下（来自脚儿网，谢谢作者）
<canvas id=“myCanvas” width="150" height="150"></canvas>
这段时间研究canvas，在交互这里遇到了比较大的坑。
三、canvas脚本绘制
具体使用如下
canvas这个标签就像一个img图片，可以在上面绘制很多的geometry，比如点、线、面。但所有绘制的元素是一个整体，集成在canvas上。如果想判断某点是不是在canvas绘制的要素上，可以通过重绘来完成，没有办法直接判断。
1 document.getElementById(selector).addEventListener('click', function (event) {
2 if (event.region === 'excited') {
3 ...
4 }
5 }, false);
html5之Canvas绘图工具基础介绍。结果图：
七、综述
中文版教程参考：
<script type="text/javascript"> cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.lineTo(10,10); cxt.stroke(); cxt.closePath(); cxt.fill(); </script>
重新绘制canvas中个各个geometry，绘制一个判断一次，因为图形的路径绑定在canvas标签上，通过 isPointInPath（）对当前路径（currentPath）判断有效。换句话说就是，当点击事件发生后，对canvas中的内容进行重绘，每次重绘一个路径图形，就用 isPointInPath（）判断一次，如果在路径内，再执行相应的操作，比如所有相同id的路径高亮显示等。
比如目的是判断鼠标当前点point(x,y)是不是在canvas绘制的要素上，用代码解释上方的描述：
html5之Canvas绘图工具基础介绍。
html5之Canvas绘图工具基础介绍。
<script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; // 也可使用rgb填充：ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect(0,0,80,100); </script>
Canvas 对象表示一个 HTML 画布元素。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。
a、canvas相对于svg的优势...
六、canvas画布的方法（截图、分析）
二、canvas定义
b、canvas对于适量绘制地图方法的可行（会在其他文章中详述使用方法）
本文由分分快三计划发布,转载请注明来源
关键词： 分分快三计划