玩转 html5 (二) ---- 用 canvas 结合脚本在画布上画简单的图 (html5 又一强大功能)

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

在代码中均给出了注释，在这里特别强调的一点是：使用canvas画图时有时候必须beginPath和colsePath,但有时不需要，为了防止出现问题，可以在每次重新画一个图时重新开启路径，画完后关闭路径。

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

[html] view plain copy

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<body>
<canvas width="500" height="500" id="canvas" style="background:yellow">
您的浏览器不支持canvas
</canvas>
<script>
//获取画布
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();
</script>
</body>
</html>