<!DOCTYPE html>
<html>
<head>
<title>canvas介绍</title>
</head>
<body>
<canvas width="600"height="600" style="background:yellow">
你的浏览器当前不支持canvas标签
</canvas>
<script type="text/javascript"><
//获取画布dom，还不可以操作
var canvas=document.getElementById(‘canvas‘)
alert(canvas);
//设置绘图环境
var cxt=canvas.getcontext(‘2d‘);
// alert(cxt)
// 画一条线段
//设定画笔的宽度
cxt.linewidth=10;
//设定画笔的颜色
cxt.strokeColor="#fff333";
// 设定笔触的位置
cxt.movoTo(20,20);
// 设置移动的方式
cxt.lineTo(100,20);
// 画线
cxt.stroke();
//封闭路径
cxt.closePath();
//凡是路径图形，必须先开始路径，画完图必须结束路径
//画圆
//开始新路径
cxt.begainPath();
//重新设置画笔
cxt.linewidth=3;
//重新设置画笔的颜色
cxt.strokestyle="#green";
cxt.arc(200,200,50,0,180,false);
cxt.stroke();
cxt.closePath();
//画一个实心圆
cxt.begainPath();
//设置填充的颜色
cxt.fillstyle=cgb("255,0,0");
cxt.arc(200,200,50,0,180,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
//画一个矩形，可以不封闭
cxt.rect(300,20,100,100,);
cxt.stroke();
//其他方法
strokeRect(300,150,100,100)
//实心矩形
cxt.begainPath();
cxt.rect(300,250,100,100)
cxt.fill();
cxt.closePath();
//其他方法
cxt.begainPath();
cxt.fillRect(300,100,100,100)
cxt.fill();
cxt.closePath()；
//其他方法 建议使用此方式
cxt.fillRect(300,390,100,100);
//设置文字进入画布中
cxt.font="60px，黑体";//css font属性
cxt.filltext("你好漂亮！"，30，40)；
//设置笔触为1像素
cxt.linewidth=1;
cxt.strokeText("你好漂亮！"，40，60);
//画图，把一副图片画到画布 注意webkit内核的浏览器chrome和猎豹不支持
var img=new Image();
img.src="###"
cxt.drawImage(img,20,370,230,306)//根据图片的大小
//一个三角形
cxt.begainPath();
cxt.moveTo(300,300);
cxt.lineTo(400,400);
cxt.lineTo(500,500);
cxt.closePath();
cxt.stroke();
//实心三角形
cxt.begainPath();
// 移动至开始点
cxt.moveTo(300,300);
cxt.lineTo(400,400);
cxt.lineTo(500,500);
cxt.closePath();
cxt.fill();
//反转图片 图片
//设置旋转环境
cxt.save();
//在异次元空间重置0，0点的位置
cxt.translate(20,20);
//图片/形状旋转
//设置旋转角度 参数是弧度 角度0-360 弧度=角度*Math.PI/180
cxt.rotate(90*Math.PI/180);
//旋转一个线段
cxt.linewidth=10;
cxt.begainPath();
cxt.moveTo(20,20);
cxt.lineto(20,100);
cxt.stroke();
cxt.closePath();
//将旋转之后的元素放回原画布
cxt.restore();
//过程不可颠倒 先设置00点在旋转角度，然后画图
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/Annely/p/10241066.html