<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>canvas标签</title>
<head>
<body>
<!-- canvas的宽和高建议直接使用width、height属性设置，同时不要指定单位px -->
<canvas id="canvas" width="500" height="800" style="background:#ccc;">
您的浏览器不支持canvas标签，请升级浏览器！
</canvas>
<script>
//获取画布对象
var canvas=document.getElementById("canvas");
//alert(canvas);
//获取用于绘画的上下文环境
var cxt=canvas.getContext("2d");
//alert(cxt);
//画一条线段
cxt.beginPath();//开启一个新路径
cxt.lineWidth=10;//设置画笔的宽度
cxt.strokeStyle="red";//设置画笔的颜色
cxt.moveTo(20,20);//设置笔触的位置,即起始点
cxt.lineTo(100,20);//设置终点的位置
cxt.stroke();//画线
cxt.closePath();//关闭路径
//画一个圆形，空心圆
cxt.beginPath();
cxt.lineWidth=3;
cxt.strokeStyle="yellow";
cxt.arc(200,200,50,0,360,false); //200,200表示圆心位置，50表示半径，0,360表示角度范围，false表示逆时针，true顺时针
cxt.stroke();
cxt.closePath();
//画一个实心圆
cxt.beginPath();
cxt.fillStyle="pink";
cxt.arc(400,200,50,0,360,false);
cxt.fill();//画实心圆
cxt.stroke();//画空心圆
cxt.closePath();
//画一个矩形，空心矩形
cxt.beginPath();
/*cxt.rect(200,300,100,50);//200,300表示起始点，100,50表示长和宽
cxt.stroke(); */
cxt.strokeRect(200,300,100,100);//建议使用此方式
cxt.closePath();
//画一个实心矩形
cxt.beginPath();
/*cxt.rect(350,300,50,100);
cxt.fill();*/
cxt.fillRect(350,300,50,200); //建议使用此方式
cxt.closePath();
//将一段文字写到画布中
cxt.font="30px 黑体";//设置css font属性
cxt.fillStyle="red";
cxt.fillText("欢迎来到南京网博！",20,500);
cxt.lineWidth=1;
// 创建渐变
var gradient=cxt.createLinearGradient(0,0,canvas.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变填色
cxt.strokeStyle=gradient;
cxt.strokeText("welcome to itany!",20,550);
//画一个三角形
cxt.beginPath();
cxt.moveTo(300,500);
cxt.lineTo(300,600);
cxt.lineTo(400,500);
cxt.closePath(); //需要先关闭路径再画
cxt.stroke();
cxt.fill();
//将一幅图片添加到画布中
var img=new Image();
img.src="dog.jpg";
cxt.drawImage(img,100,400);
</script>
</body>
</html> 原文地址：http://blog.csdn.net/wangzi11322/article/details/45305893
