Canvas经典实例教会你怎么用代码绘图
作者：秋了秋 发表时间：2015年07月16日
Canvas是html5的新标签，在html5新出的一批标签之内，我认为Canvas是一个领头标签，俗称画布。用于在网页上绘制图像甚至是视频动画的一个专属平台，绘制动作由js来承担。把我写的一段简单的代码放出来，就不解释了，解释都在注释里面：
<canvas id="canvas" width="600" height="400">你的该死的浏览器不支持画布！</canvas>
<script>
var qiuye=document.getElementById("canvas");
var ctx=qiuye.getContext("2d");/**创建画布**/
ctx.fillStyle="red";/**定义fill填充颜色**/
ctx.strokeStyle="blue";/**定义stroke线条颜色**/
/**stroke画折线**/
ctx.moveTo(21,24);/**开始坐标（x,y）**/
ctx.lineTo(222,245);/**指向坐标（x,y）**/
ctx.lineTo(419,23);/**指向坐标（x,y）**/
ctx.stroke();/**绘线**/
/**画矩形**/
ctx.fillRect(20,20,400,4);/**（开始的x坐标,开始的y坐标,矩形宽度,矩形高度）**/
ctx.fillRect(220,20,4,200);
/**画圆形**/
ctx.beginPath();/**创建路径**/
ctx.arc(222,220,15,0,Math.PI*2,true);/**(圆心x坐标,圆心y坐标,圆的半径,起始角度,结束角度,顺时针/逆时针（false）**/
ctx.closePath();/**结束路径**/
ctx.fill();/**填充**/
/**画渐变**/
var gradient=ctx.createLinearGradient(0,30,400,30);/**(渐变开始点的 x 坐标,渐变开始点的 y 坐标,渐变结束点的 x 坐标,渐变结束点的 y 坐标)**/
gradient.addColorStop(0,"#ff0000");/**渐变起始颜色**/
gradient.addColorStop(1,"#00ff00");/**渐变结束颜色**/
ctx.fillStyle=gradient;
ctx.fillRect(20,260,400,60);
/**画图像**/
var img=new Image();
img.src="3dan.png";
ctx.drawImage(img,150,50);
</script>
1
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/367.html