html5-canvas

来源：互联网发布：怎么看windows 版本编辑：程序博客网时间：2024/06/14 14:59
canvas要想实现相应结果必须要有javascript的辅助
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>canavs</title><style>*{margin:0; padding:0;list-style:none;}.canvasId{ border:2px solid #003;}div{ margin-left:10px; float: left;}p{z-index:2;}</style><script type="text/javascript">window.onload=function (){    //画矩形var c=document.getElementById("canvasId1");var ctx1 = c.getContext("2d");ctx1.fillStyle="#003";ctx1.fillRect(20,10,200,100);//画空心圆var a = document.getElementById("canvasId2");var ctx2 = a.getContext("2d");ctx2.beginPath();ctx2.arc(20,20,20,Math.PI,2*Math.PI);ctx2.stroke();//画实心圆var b = document.getElementById("canvasId2");var ctx3 = b.getContext("2d");ctx3.beginPath();ctx3.arc(100,50,40,0,2*Math.PI);ctx3.fill();//划线从(10,0)到(100,100)然后再到(200,100)var d = document.getElementById("canvasId3");var ctx4 = d.getContext("2d");ctx4.moveTo(10,0);ctx4.lineTo(100,100);ctx4.lineTo(190,0);ctx4.moveTo(10,100);ctx4.lineTo(100,0);ctx4.lineTo(190,100);ctx4.stroke();//画文字var e = document.getElementById("canvasId4");var ctx5 = e.getContext("2d");ctx5.font="30px Arial";ctx5.fillText("hello world",10,50);//参数（字体内容，x，y，字体内容最大宽度（可选））ctx5.strokeText("hello world",10,80,80);//画颜色渐变var f = document.getElementById("canvasId5");var ctx6 = f.getContext("2d");//参数（x起始位置，y起始位置，x结束位置，y结束位置）var grd = ctx6.createLinearGradient(0,0,100,100);//0代表从左到右那个左，1代表那个右grd.addColorStop(0,"red");grd.addColorStop(1,"#FFF");ctx6.fillStyle=grd;ctx6.fillRect(10,10,80,80);//在画布上画放置图像var g = document.getElementById("canvasId6");//var img = document.getElementById("myimg");var ctx7 = g.getContext("2d");var img = new Image();img.src = "t.jpg";ctx7.drawImage(img,0,10);}</script></head><body><div> <canvas id="canvasId1" class="canvasId" width="300" height="200" ></canvas></div><div> <canvas id="canvasId2" class="canvasId" width="200" height="100" ></canvas></div><div> <canvas id="canvasId3" class="canvasId" width="200" height="100" ></canvas></div><div> <canvas id="canvasId4" class="canvasId" width="200" height="100" ></canvas></div><div> <canvas id="canvasId5" class="canvasId" width="200" height="100" ></canvas></div><div> <canvas id="canvasId6" class="canvasId" width="200" height="100" ></canvas> <img src="t.jpg" alt="" id="myimg" style="display:none"/></div></body></html>
0 0