怎么用HTML5的canvas来绘图

本文小编为大家详细介绍“怎么用HTML5的canvas来绘图”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用HTML5的canvas来绘图”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

　　canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。我们在Canvas区域中绘制图形，并不是拿鼠标在Canvas中画画。事实上Canvas元素只是一块无色透明的区域，就像一个只有宽度高度没有背景的DIV一样，需要使用JavaScript脚本在其中绘画。

　　示例一：绘制方形

　　我们在页面上创建一个canvas元素，并且制定id及宽和高。

　　your?browser?does?not?support?the?canvas?tag

　　Canvas 元素本身是没有绘图能力的。所有的绘制工作必须使用JavaScript来完成：

　　var?c=document.getElementById（"square"）;? var?cxt=c.getContext（"2d"）;

　　cxt.fillStyle="#ff0000";

　　cxt.fillRect（0,0,150,75）;

　　通过document.getElementById（"square"）来获取canvas元素，然后使用c.getContext（"2d"）来获取2d绘图对象。接着使用fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。上例中绘制了一个红色的方形。

　　示例二：绘制线条

　　我们可以通过起始坐标，和结束坐标，来绘制一条直线。

　　var?line=document.getElementById（'line'）;? var?c=line.getContext（'2d'）;

　　c.moveTo（20,20）;

　　c.lineTo（200,100）;

　　c.lineTo（20,100）;

　　c.stroke（）;

　　moveTo（x，y）：设置绘图起始坐标。

　　lineTo（x, y）：从上一个起点到（x,y）的点画线，上一个起点可以通过moveTo来指定，默认为原先路径的终点。

　　stroke（）：描边路径。

　　示例三：绘制圆形

　　我们可以通过规定尺寸、颜色和位置，来绘制一个圆。

　　var?c=document.getElementById（'circle'）;? var?r=c.getContext（'2d'）;

　　r.fillStyle='#ff0000';

　　r.beginPath（）;

　　r.arc（70,80,45,0,Math.PI*2,true）;

　　r.closePath（）;

　　r.fill（）;

　　beginPath（）：创建路径的第一步是调用beginPath方法，返回一个存储路径的信息。

　　closePath（）：从当前的点到起始点闭合路径。

　　arc（x, y, radius, startAngle, endAngle, anticlockwise）： （x,y）是圆弧的圆心，radius-半径， startAngle和endAngle是圆弧的开始和结束弧度（radians = （Math.PI/180）*degree），anticlockwise为true的话是逆时针，否则为顺时针。

　　fillStyle：设置填充色。

　　fill（）：填充路径。

　　示例四：制作动画

　　我们可以通过javascript动态地在画布上绘制图像，并产生动画效果。

　　var?x=0;? var?y=0;? var?ctx?=?document.getElementById（"animate"）。getContext（"2d"）;

　　setInterval（function（）{

　　ctx.clearRect（0,0,600,600）;

　　ctx.fillStyle="#fc0";

　　ctx.beginPath（）;

　　ctx.arc（x++,y++,15,0,Math.PI*2,true）;

　　ctx.closePath（）;

　　ctx.fill（）;? },10）;

　　上述代码中，我们使用setInterval（）来定时运行（每隔10毫秒运行一次），画布中，绘制一个黄色的圆形，并且在绘制前先要clearRect（） 清除上次绘制的圆形，这样看起来就是一个从画布左上角到右下角运动的小球的简单动画。

　　Canvas还能加载图像，绘制颜色渐变的图案，产生阴影效果等，本站helloweba将会有更多canvas效果方面的讲解。Canvas是一个很轻便的标签，但是，使用它能完成的非常炫丽效果，这绝对让你震惊。只要有JavaScript脚本的支持，Canvas能完成你几乎能想到的所有效果。

读到这里，这篇“怎么用HTML5的canvas来绘图”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。