HTML5之CANVAS 用法示例汇总

来源：互联网发布：autocad mac 中文版编辑：程序博客网时间：2024/06/05 00:58
<html><head></head><body><canvas id="myRect" width="200" height="100">Your browser does not support the canvas element.</canvas> <canvas id="myLine" width="200" height="100">Your browser does not support the canvas element.</canvas><canvas id="myArc" height="300" width="200">Your browser does not support the canvas element.</canvas><canvas id="myColor" height="200" width="100">Your browser does not support the canvas element.</canvas><canvas id="myImage" height="300" width="300">Your browser does not support the canvas element.</canvas></body><script type="text/javascript">/////矩形////////////////////////////////var c=document.getElementById("myRect");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";////X,Y,WIDTH,HEIGHTcxt.fillRect(0,0,150,75);/////////end////////////////////////////////////线段///////////////////////////var c=document.getElementById("myLine");var cxt=c.getContext("2d");////X,Ycxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.lineTo(10,10);cxt.stroke();/////end///////////////////////////////////圆形///////////////////////////////var c=document.getElementById("myArc");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();////圆心横坐标、纵坐标、半径cxt.arc(100,100,100,200,Math.PI*2,true);cxt.closePath();cxt.fill();/////end///////////////////////////////////渐变////////////////////////////////var c=document.getElementById("myColor");var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);/////开始颜色(只能横向渐变)grd.addColorStop(0,"#FF0000");/////末端颜色grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;/////x,y,width,heightcxt.fillRect(10,10,200,100);////end///////////////////////////////////////图片/////////////////////////////var c=document.getElementById("myImage");var cxt=c.getContext("2d");var img=new Image();////图片路径img.src="canvas.png";////绘制图片、定义图片的横、纵坐标cxt.drawImage(img,20,10);/////end//////////////////////////////</script> </html>