HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 实例代码 查看内容

Canvas的画线技巧

2012-5-31 11:17| 发布者: html5cn| 查看: 57308| 评论: 3|原作者: 寂寞贱客|来自: 爱猫猫技术博客

摘要: 利用Canvas标签换线需要怎么做?本文详细介绍了如何用Canvas标签绘制一条直线和一个多边形
       利用Canvas标签换线需要怎么做?

       首先,我们必须先搭建一个“舞台”。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6.        <canvas id = "myCanvas">Canvas画线技巧</canvas>
  7. <script>
  8.     var myCanvas = document.getElementById("myCanvas");
  9.     var context =  myCanvas.getContext("2d");
  10. </script>
  11. </body>
  12. </html>
复制代码

       1、为线条选上你喜欢的颜色

  1. context.strokeStyle = "rgba(0,0,0,0.5)"//可以选用CSS颜色字符串(rgb,rgba,hsl,hsla),只有CSS3以上有opacity属性
  2. context.fillStyle = "#FF0000"//设置填充颜色
复制代码


       提示:RGBA是CSS3的新增属性值,就是在传统的RGB基础上增加了一个alpha透明值,代表透明度,值在0~1之间,0为完全透明,1为完全不透明,0.5为半透明。

       HSLA(e.g:“hsla(0,50%,50%,0)”)是CSS3的新增属性值,其中H代表色相(值在0~360之间),S和L分别代表饱和度和亮度(值在0%~100%之间)。

       2、如何画线

       之前说过,Canvas是绘制点阵图形的,所以,我们应该使用点阵坐标来确定位置和画图。


  1. context.moveTo(x0, y0);//将画笔移到x0,y0处
  2. context.lineTo(x1, y1);//从x0,y0到x1,y1画一条线
  3. context.lineTo(x2, y2);//从x1,y1到x2,y2画条线
  4. context.fill();//填充
  5. context.stroke();//画线
复制代码


       3、路径绘制

  1. context . beginPath() //清空子路径
  2. context . closePath() //闭合路径
复制代码


       beginPath——重设绘图上下文的子路径列表,并清空所有的子路径。

       closePath——在绘图上下文没有子路径时,什么也不做;否则,它先把最后一个子路径标示为闭合,然后建立一个包含最后子路径的第一个点的子路径,并加入到绘图上下文。

       有点拗口,一般可以看为,假如最后一个子路径,我们命名为N,假设N有多个点,则用直线连接N的最后一个点和第一个点,然后关闭此路径和moveTo到第一个点。

       现在,我们利于已经学到的知识,就可以简单的绘制一个三角形了。


  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5.        <canvas id = "myCanvas" width = '500' height = '500'>Canvas画线技巧</canvas>
  6. <script>
  7.     var myCanvas = document.getElementById("myCanvas");
  8.     var context =  myCanvas.getContext("2d");
  9.         context.fillStyle ='rgba(255,0,0,.3)';//填充颜色:红色,半透明
  10.         context.strokeStyle ='hsl(120,50%,50%)';//线条颜色:绿色
  11.         context.lineWidth = 13;//设置线宽
  12.         context.beginPath();
  13.         context.moveTo(200,100);
  14.         context.lineTo(100,200);
  15.         context.lineTo(300,200);
  16.         context.closePath();//可以把这句注释掉再运行比较下不同
  17.         context.stroke();//画线框
  18.         context.fill();//填充颜色
  19. </script>
  20. </body>
  21. </html>
复制代码


       怎么样?看上去是不是很简单?当然,这只是最基本的Canvas画线技巧,更精彩的还在下面。

       4、Canvas绘图状态

       Canvas绘图的时候,每个上下文都包含一个绘图状态的堆,绘图状态包含下列内容:

       当前的transformation matrix;

       当前的clipping region ;

       当前的属性值:fillStyle, font, globalAlpha,  globalCompositeOperation, lineCap, lineJoin, lineWidth, miterLimit, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, strokeStyle, textAlign,  textBaseline


  1. context . restore() //弹出堆最上面保存的绘图状态
  2. context.save() //在绘图状态堆上保存当前绘图状态
复制代码


       举一个简单的例子,假如你设置了线条颜色为红色,然后context.save();然后设置线条颜色为绿色,再context.restore()一下,这时线条的颜色实际为红色,所以一般的画图方法是这样的。

  1. context.save() ;
  2. drawing codes…
  3. context.restore();
复制代码


       5、变化路径

  1. context.translate(x, y) //移动Canvas的原点到x,y处
  2. context.rotate(angle)  //按给定的弧度旋转,按顺时针旋转
复制代码


       默认原点是(0,0)处,如果设置成context.translate(10, 10),那么Canvas的原点就变成(10,10)了,rotate时也是以(10,10)点为中心旋转。

       其实,使用Canvas绘图和我们经常使用的Photoshop软件的绘图步骤是一样的:建立选区——确定坐标点——绘制路径——画线、填充。

       下面,就把我们学到的知识练习一下吧。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6.        <canvas id = "myCanvas" width = '500' height = '500'>Canvas画线技巧</canvas>
  7. <script>
  8.     var myCanvas = document.getElementById("myCanvas");
  9.     var context =  myCanvas.getContext("2d");
  10.         function drawPath(x, y, n, r)
  11.         {
  12.                 var i,ang;
  13.                 ang = Math.PI*2/n //旋转的角度
  14.                 context.save();//保存状态
  15.                 context.fillStyle ='rgba(255,0,0,.3)';//填充红色,半透明
  16.                 context.strokeStyle ='hsl(120,50%,50%)';//填充绿色
  17.                 context.lineWidth = 1;//设置线宽
  18.                 context.translate(x, y);//原点移到x,y处,即要画的多边形中心
  19.                 context.moveTo(0, -r);//据中心r距离处画点
  20.                 context.beginPath();
  21.                 for(i = 0;i < n; i ++)
  22.                 {
  23.                         context.rotate(ang)//旋转
  24.                         context.lineTo(0, -r);//据中心r距离处连线
  25.                 }
  26.                 context.closePath();
  27.                 context.stroke();
  28.                 context.fill();
  29.                 context.restore();//返回原始状态
  30.         }
  31.         drawPath(100, 100, 5, 40)//在100,100处画一个半径为40的五边形
  32.         drawPath(200, 100, 3, 40)//在200,100处画一个半径为40的三角形
  33.         drawPath(300, 100, 7, 40)//在300,100处画一个半径为40的七边形
  34.         drawPath(100, 200, 15, 40)//在100,200处画一个半径为40的十五边形
  35.         drawPath(200, 200, 4, 40)//在100,200处画一个半径为40的四边形
  36. </script>
  37. </body>
  38. </html>
复制代码

上面的代码是教你如何绘制一个N边形,怎么样?是不是很简单。


更多
9

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (9 人)

发表评论

最新评论

引用 dok001 2012-6-1 12:57
好,学习了
引用 ^_^/mg 2012-6-9 17:03
房主问下一个问题,第一个例子里面,三角形,中间区域是怎么得来的?棕色部分的。边框是13  里面是红色,是半透明的缘故变成了  粉色。但是不懂为什么产生了 棕色部分。
引用 Albert 2012-9-13 14:29
果断谢谢LZ分享,学习了!

查看全部评论(3)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-21 04:05

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部