Canvas-未完

strokeRect()方法-绘制矩形

<canvas id="drawing" width="200" height="200">A drawing of something </canvas>

window.onload = function () {

var drawing = document.getElementById("drawing");

//确定浏览器是否支持

if (drawing.getContext) {

var context = drawing.getContext("2d");

context.fillStyle = "rgba(0, 0, 255, 0.5)";

context.strokeStyle = "#ff0000";

context.fillRect(10, 10, 50, 80);

}

}

toDataURL-将图片转换为编码

window.onload = function () {

var drawing = document.getElementById("drawing");

//确定浏览器是否支持

if (drawing.getContext) {

var context = drawing.getContext("2d");

context.fillStyle = "rgba(0, 0, 255, 0.5)";

context.strokeStyle = "#ff0000";

context.fillRect(10, 10, 50, 80);

}

//获取转换的数据URI

var imgURI = drawing.toDataURL("image/png");

var img = document.createElement("img");

img.src = imgURI;

document.body.appendChild(img);

}