HTML&JS笔记(1)
2013-12-12 12:04
288 查看
canvas基本绘图
效果:
<!DOCTYPE html> <html> <body> <meta charset="utf-8"> <canvas id="myCanvas" width="500" height="500"> 你的浏览器不支持HTML5 </canvas> <P>你好,世界</p> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.lineWidth=10; ctx.strokeStyle="red"; ctx.lineCap="round"; ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(150,50); ctx.stroke(); ctx.strokeRect(50,60,20,30); ctx.fillStyle="green"; ctx.beginPath(); ctx.fillRect(65,75,90,70); ctx.stroke(); ctx.lineWidth=3; ctx.strokeStyle="red"; ctx.beginPath(); ctx.arc(300,300,100,0,360*Math.PI/180,true); ctx.stroke(); ctx.beginPath(); ctx.arc(300,300,50,0,160*Math.PI/180,true); ctx.stroke(); </script> </body> </html>
本博客所有内容是原创,如果转载请注明来源
http://blog.csdn.net/myhaspl/
效果:相关文章推荐
- HTML&JS笔记(1)
- html&JS学习笔记(4)
- HTML&JS&DOM笔记总纲
- Web前端-HF-HTML5Programming笔记-CH1&CH2 HTML5&JS&DOM
- 前端基础笔记HTML&CSS&JS
- HTML&JS笔记(2)
- HTML&JS 笔记(3)
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第24讲_js案例讲解_js自定义函数_学习笔记_源代码图解_PPT文档整理
- HTML5+CSS3+JS学习笔记-1
- HTML&CSS学习笔记
- JQuery笔记(表单验证)八 metadata-demo.html jquery.metadata.js
- Head first HTML&CSS学习笔记
- 在HTML中用js获取通过GET、POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值
- HTML&CSS基础学习笔记1.23-表单的文本域和下拉列表
- 【js学习笔记-066】--- html里的条件注释
- HTML5+CSS3+JS学习笔记-7-JS调节背景色
- js之html encode,decode
- HTML5+CSS3+JS学习笔记-13-CSS3之box-sizing
- HTML&CSS基础学习笔记1.20-DIV标签2
- js笔记(9)之定时器&&数字时钟&&延时提示框