canvas学习初探

参考地址：
菜鸟学习

描述
HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

本手册提供完整的 getContext(“2d”) 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 及其属性和方法。

注释：Internet Explorer 8 以及更早的版本不支持 元素。

支持检测
var canvas = document.getElementById(‘canvas’);

if (canvas.getContext){
var ctx = canvas.getContext(‘2d’);
// drawing code here
} else {
// canvas-unsupported code here
}

接口地址
w3school

点
用矩形fillRect或者圆形arc绘制

---

function draw(){
var canvas = document.getElementById(‘tutorial’);
if(!canvas.getContext) return;
var ctx = canvas.getContext(“2d”);
ctx.fillRect(10, 10, 1, 1); // 绘制矩形，填充的默认颜色为黑色

扫描二维码关注公众号，回复： 17238118 查看本文章

}
draw();

线
function draw(){

var canvas = document.getElementById(‘tutorial’); if (!canvas.getContext) return; var ctx = canvas.getContext(“2d”); ctx.beginPath(); //新建一条path ctx.moveTo(50, 50); //把画笔移动到指定的坐标 ctx.lineTo(200, 50); //绘制一条从当前位置到指定坐标(200, 50)的直线. //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做 ctx.closePath(); ctx.stroke(); //绘制路径。

}
draw();

面（三角形）
function draw(){
var canvas = document.getElementById(‘tutorial’);
if (!canvas.getContext) return;
var ctx = canvas.getContext(“2d”);
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 200);
ctx.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形
ctx.stroke(); //描边。stroke不会自动closePath()
}
draw();

ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。