html5之Canvas绘图工具基础介绍

作者:分分快三计划

  需要注意的是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>

 

  图片 1

  注意:该接口目前尚在实验中,在未来版本的浏览器中其语法和行为可能有所改变。未纳入标准之前,可以玩玩

  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定义

            图片 2

  b、canvas对于适量绘制地图方法的可行(会在其他文章中详述使用方法)

  

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划