HTML5canvas作品网站,HTML5 Canvas

HTML5的Canvas元素是一个强大的绘图元素，利用他可以绘制出你想要的形状，下面是几个简单的Canvas应用代码。function DrawSj() {

var myCanvas1 = document.getElementById("myCanvas");

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

var draw = myCanvas1.getContext("2d");

if (state == 1) {

state = 0;

player.play();

affiche.start();

myCanvas1.title = "鍋滄鎾斁";

draw.clearRect(0, 0, 200, 200);

draw.beginPath();

draw.fillStyle = "#fff";

draw.fillRect(0, 0, 5, 40);

draw.fill();

draw.beginPath();

draw.fillStyle = "#fff";

draw.fillRect(8, 0, 5, 40);

draw.fill();

} else {

state = 1;

player.pause();

affiche.stop();

myCanvas1.title = "缁х画鎾斁";

draw.clearRect(0, 0, 200, 200);

draw.beginPath();

draw.fillStyle = "#fff";

draw.moveTo(0, 0);

draw.lineTo(0, 20);

draw.lineTo(10, 10);

draw.fill();

}

}

function DrawnewCanvas() {

var mynewCanvas = document.getElementsByClassName("newCanvas");

for (var i = 0; i 

var draw = mynewCanvas[i].getContext("2d");

draw.beginPath();

draw.fillStyle = "#fff";

draw.moveTo(-1, 10);

draw.lineTo(10, 21);

draw.lineTo(10, -1);

draw.fill();

draw.beginPath();

draw.fillStyle = "#2974ba";

draw.moveTo(0, 10);

draw.lineTo(10, 20);

draw.lineTo(10, 0);

draw.fill();

}

}

function DrawPlCanvas() {

var myplCanvas = document.getElementsByClassName("plCanvas");

for (var i = 0; i 

var draw = myplCanvas[i].getContext("2d");

draw.beginPath();

draw.fillStyle = "#fff";

draw.moveTo(10, -1);

draw.lineTo(-1, 10);

draw.lineTo(21, 10);

draw.fill();

draw.beginPath();

draw.fillStyle = "#224b73";

draw.moveTo(10, 0);

draw.lineTo(0, 10);

draw.lineTo(20, 10);

draw.fill();

}

}