请珍惜劳动小编成果，这篇文章是原来小编，转载请注明出处。

于html5中能够使用canvas标签在画布上绘图，先直接上代码，这篇文章先简介一下canvas的用法。简单画几个圆，矩形，三角形，写字。

在代码中均给出了凝视。在这里特别强调的一点是：使用canvas绘图时有时候必须beginPath和colsePath,但有时不须要，为了防止出现故障，能够在每次又一次画一个图时又一次开启路径，画完后关闭路径。

这些代码是在猎豹浏览器上实现的，有些浏览器可能不支持。

您的浏览器不支持canvas

//获取画布

var canvas=document.getElementById('canvas');

//alert(canvas);

//设置画图环境

var cxt=canvas.getContext('2d');

//画一条线段

//開始新路径，第一笔能够不写

cxt.beginPath();

//设置画笔宽度

cxt.lineWidth=4;

//设置画笔颜色

cxt.strokeStyle="red";

//笔从哪開始画

cxt.moveTo(20,20);

//给出终点

cxt.lineTo(100,20);

//開始画

cxt.stroke();

//封闭路径

cxt.closePath();

//画空心圆

//開始新路径

cxt.beginPath();

//路径函数 x,y,r,角度范围,顺时针/逆时针

cxt.arc(100,100,50,0,360,false);

cxt.stroke();

cxt.closePath();

//画实心圆

cxt.beginPath();

//设置填充颜色

cxt.fillStyle="blue";

cxt.arc(100,200,50,0,360,false);

//实心

cxt.fill();

//在画个圆，不填充，加边框，可不画

cxt.stroke();

cxt.closePath();

//画矩形

//矩形函数 x,y,长宽

cxt.beginPath();

cxt.rect(200,100,50,60);

cxt.stroke();

cxt.closePath();

//其它方法

cxt.beginPath();

cxt.strokeRect(200,190,120,20);

cxt.closePath();

//实心矩形

cxt.beginPath();

cxt.rect(200,220,50,50);

cxt.fill();

cxt.closePath();

//其它方法

cxt.fillRect(200,280,50,50);

//写字

cxt.font="40px 黑体 ";

//实心字

cxt.fillText("暗伤无痕",300,50);

//空心字

//将笔触调细

cxt.lineWidth="1";

cxt.strokeText("暗伤无痕",300,100);

//将图片画到画板上 猎豹不支持

var img=new Image();

img.src="1.jpg";

cxt.drawImage(img,300,400,100,100);

//画一个三角形

cxt.beginPath();

//移动至開始点

cxt.moveTo(300,100);

cxt.lineTo(300,200);

cxt.lineTo(350,150);

cxt.closePath();//三角形须要先闭合路径再画

//空心

//cxt.stroke();

//实心

cxt.fill();

//旋转图片

//设置旋转环境

cxt.save();

//在异次元空间重置0,0点位置

cxt.translate(20,20);

//图片/x形状旋转

//设置旋转角度 參数是弧度，角度 0--360 弧度角度*Math.PI/180

//

cxt.rotate(-30*Math.PI/180);

//旋转线段

cxt.beginPath();

cxt.lineWidth=4;

cxt.moveTo(0,0);

cxt.lineTo(20,100);

cxt.stroke();

cxt.closePath();

//将旋转后的图片返回原画布

cxt.restore();

版权声明：本文博主原创文章，博客，未经同意不得转载。