一句话: 各种api各种调用!!
<canvas id="can" width="500" height="500" style="background:orange;">不支持!</canvas>
<script>
// 获取画布,还不可以操作
var can = document.getElementById('can'); // alert -->Element
// console.log(can);
// 设置绘图环境
var cxt = can.getContext('2d'); // alert -->Context2D
// console.log(ext);
// 画一条线段。
cxt.lineWidth = 10; // 可以设定画笔宽度
cxt.strokeStyle="gray";
cxt.moveTo(20,20); // 从哪开始 从哪开始画?
cxt.lineTo(20,290); // 画到哪? 设置移动的方式
cxt.stroke(); // 开始画
// 封闭路径
cxt.closePath();
// 重新打开
cxt.beginPath();
// 画圆
cxt.strokeStyle ="green";
cxt.arc(200,200,50,0,360,false);
cxt.stroke();
cxt.closePath();
cxt.fillStyle = "red";
cxt.beginPath();
cxt.arc(200,50,30,0,360,false);
cxt.stroke();
cxt.fill();
cxt.closePath;
// 画一个矩形
cxt.rect(300,20,100,100);
cxt.stroke();
cxt.beginPath();
cxt.rect(100,20,100,30);
cxt.stroke();
cxt.fill();
cxt.fillRect(300,50,20,20);
cxt.fill();
// 看api调用接口即可
cxt.font="40px 黑体";
cxt.fillText("以为",30,300); // 写字
cxt.lineWidth="1";
cxt.font="80px 黑体";
cxt.strokeText("以为",60,300);
// 图片
var img = new Image();
img.src="zxxuey1.jpg";
cxt.drawImage(img,20,370,30,200); // 浏览器有几个不支持
// 三角
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(30,50);
cxt.lineTo(50,30);
cxt.lineTo(50,50);
cxt.stroke();
cxt.closePath();
// 旋转
cxt.save();
// 图片/形状旋转
// 设置旋转角度rotate 参数是弧度 弧度=角度*Math.PI / 180
cxt.rotate(-30*Math.PI/180);
// 在这个空间重置 0 0 位置
cxt.translate(20,20);
// 旋转一个线段
cxt.beginPath();
cxt.moveTo(0,0); // 按照他旋转
cxt.lineTo(20,270);
cxt.stroke();
cxt.closePath();
// 将旋转之后的元素放回原画布
cxt.restore();
</script>
囧,还是一句话,各种api满天飞