divcss2014-07-08 19:41:21 2950
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 < mynewCanvas.length; 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 < myplCanvas.length; 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(); } }
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:HTML5 Canvas HTML5绘图 Canvas
文章固定链接:https://www.pengyaou.com/legendsz/front/divcss/MTM=.html
上一篇 javascript瀑布流算法
下一篇 HTML弹出对话框