首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

与大伙分享几个有关canvas的代码(一)

2012-09-09 
与大家分享几个有关canvas的代码(一)第一个!DOCTYPE htmlhtmlbodycanvas idmyCanvas width200

与大家分享几个有关canvas的代码(一)


第一个


<!DOCTYPE html><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the HTML5 canvas tag.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script></body></html>







第二个


<!DOCTYPE html><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the HTML5 canvas tag.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.moveTo(10,10);ctx.lineTo(150,50);ctx.lineTo(10,50);ctx.stroke();</script></body></html>







第三个


<!DOCTYPE html><html><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the HTML5 canvas tag.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var grd=ctx.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");ctx.fillStyle=grd;ctx.fillRect(0,0,175,50);</script></body></html>

热点排行