html5新增的canvas标签可用来绘图。今天开始学习了一点绘制基础。
一、绘制三角形
1)canvas绘图是基于状态的绘图,也就是说应该先设置绘图状态,再调用函数进行绘制
2)坐标系:canvas的左上角为原点,向右为x轴正方向,向下为y轴正方向
绘图步骤:
1)定义标签
<canvas id='canvas1'>
当前浏览器不支持canvas,换个浏览器试试 //向下降级,如果浏览器支持,会忽略标签里的文字
</canvas>
2)在js中初始化
//初始化
var canvas=document.getElementById('canvas1');
canvas.width=1024;
canvas.height=500;
//获取绘图上下文环境,是进行绘制所需的接口
var context=canvas.getContext('2d');
我们之后的操作都是基于context对象
3)设置绘图状态
context.moveTo(50,50);
context.lineTo(50,500);
context.lineTo(500,50);
context.lineTo(50,50