当前位置: 秋叶网络博客 前端编程 ◊ Canvas经典实例教会你怎么用代码绘图

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>
0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/367.html
目录: 前端编程 | 标签: Canvas | 20686次阅读