<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="800" height="600" style="border:1px solid"></canvas> <script type="text/javascript"> // get canvas instance var canvas=document.getElementById("myCanvas"); var ctx=canvas.getContext("2d"); // draw a line ctx.moveto(10,10); ctx.lineto(150,50); ctx.lineto(10,50); ctx.stroke(); // draw a circle ctx.beginPath(); ctx.arc(100,100,30,Math.PI*2,true); ctx.closePath(); ctx.stroke(); // fill a circle ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100,200,true); ctx.closePath(); ctx.fill(); // create linear gradient var linearGrd=ctx.createLinearGradient(0,270,0); linearGrd.addColorStop(0,"black"); linearGrd.addColorStop(0.5,"red"); linearGrd.addColorStop(1,"white"); ctx.fillStyle=linearGrd; ctx.fillRect(120,230,140,40); // create radial gradient var radialGrd = ctx.createradialGradient(400,400,50,100); radialGrd.addColorStop(0,"red"); radialGrd.addColorStop(1,"white"); ctx.fillStyle=radialGrd; ctx.fillRect(300,300,500,500); // draw image var img=new Image(); img.src="e.jpg"; img.onload=function(){ ctx.drawImage(img,50); }; </script> </body> </html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。