Canvas绘制入门

Canvas绘制入门

HTML5元素用于图形的绘制，通过脚本（通常是JavaScript）来完成
标签只是图形容器，要使用脚本来绘制图形

canvas绘制步骤：
1、使用HTML来创建
HTML

JavaScript

var canvas = document.getElementById ('canvas');
//获取canvas绘图上下文环境
contextvar context = canvas.getContext ('2d');

2、使用脚本来创建

var CANVAS_WIDHT = 200 , CANVAS_HEIGHT = 200;
window.onload = function() {
    createCanvas();
}
function createCanvas() {
    document.body.innerHTML = " width='"+CANVAS_WIDHT+"' height='"+CANVAS_HEIGHT+"'>";
}

判断浏览器是否支持canvas
① HTML
当前浏览器不支持Canvas，请更换浏览器后再试试
② JavaScript
if(canvas.getContext('2d')) {
var context = canvas.getContext('2d');
} else {
alert(“当前浏览器不支持Canvas，请更换浏览器后再试试”);
}