HTML&JS笔记(1)
2013-12-12 17:08
357 查看
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>
效果:
相关文章推荐
- html&JS学习笔记(4)
- HTML&JS&DOM笔记总纲
- 前端基础笔记HTML&CSS&JS
- Web前端-HF-HTML5Programming笔记-CH1&CH2 HTML5&JS&DOM
- HTML&JS笔记(2)
- HTML&JS笔记(1)
- HTML&JS 笔记(3)
- jsp中小脚本<%%>与html或者js脚本的嵌套
- HTML笔记——导入外部样式表 <link>标签
- HTML5+CSS3+JS学习笔记-12-使用JS及函数来制作表格加上3D透视效果
- 《JS高程(3)》BOM-01(window&窗口)-第8章笔记(06)
- HTML&CSS基础学习笔记1.19-DIV标签1
- html/css/js 学习笔记 - 牛客网试卷:前端工程师能力评估
- Head first HTML&CSS ---[学习笔记第二章]
- HTML 学习笔记(一)<h1>、<hr />、<p>、<ol><li>、<ul><li>、<dl><dt><dd>、 、<a name="abc">、href="#abc"、mailto
- js 去掉html标签及
- jquery&js笔记
- [Html&JS] 一个网页上,不同的子父窗口iframe之间如何相互调用
- HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素
- Web前端面试题笔记_HTML&CSS篇