html5 canvas 涂鸦
2015-06-17 14:59
771 查看
<!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,0,Math.PI*2,true); ctx.closePath(); ctx.stroke(); // fill a circle ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100,200,30,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); // create linear gradient var linearGrd=ctx.createLinearGradient(0,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,400,400,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,0,0,50,50,0,400,50,50); }; </script> </body> </html>
相关文章推荐
- java-WEB中的监听器Lisener
- GUI - Web前端开发框架
- Extjs4.0 最新最全视频教程
- HTML5中在客户端验证文件上传的大小
- MyEclipse Web Project转Eclipse Dynamic Web Project
- axis备忘
- Erlang实现的一个Web服务器代码实例
- 防止网页脚本病毒执行的方法-from web
- 自学成才的秘密:115个 web Develop 资源
- 使用批处理修改web打印设置笔记 适用于IE
- Apache Web让JSP“动”起来
- web下载的ActiveX控件自动更新
- 推荐六款WEB上传组件性能测试与比较第1/10页
- 关于三种主流WEB架构的思考
- 使用 Iisext.vbs 列出 Web 服务扩展文件的方法
- 使用 Iisext.vbs 删除 Web 服务扩展文件的方法
- 使用 iisext.vbs 禁用 Web 服务扩展的方法
- 用vbs 实现从剪贴板中抓取一个 URL 然后在浏览器中打开该 Web 站点
- web标准知识——从p开始,循序渐进