canvas入门教程

前言

canvas本身是一个画布，但是不能通过css控制其具体的内容，需要jsapi进行相关的描绘。

html代码

<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>

js结构

function drawDiagonal(){
     //取的canvas元素及其绘图上下文
     var canvas = document.getElementById(‘diagonal’);
     var context = canvas.getContext('2d');
     // 用绝对坐标来创建一条路径
     context.beginPath();
     context.moveTo(70,140);
     context.lineTo(140,70);
     // 将这条线绘制到canvas上
     context.stroke();
}
window.addEventListener('load',drawDiagonal,true);