Html5：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Rectangle</title>
  6. <style>
  7. body{
  8. background:#dddddd;
  9. }
  10. #canvas{
  11. background:#eeeeee;
  12. border:1px solid #000000;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <canvas id="canvas" width="600" height="400">
  18. Canvas not supported
  19. </canvas>
  20. <script src="rectangle.js"></script>
  21. </body>
  22. </html>

javascript:

  1. // JavaScript Document
  2. var canvas=document.getElementById('canvas'),
  3. context=canvas.getContext('2d');
  4. context.lineJoin='round';
  5. context.lineWidth=30;
  6. context.font='24px Helvetica';
  7. context.fillText('Click anywhere to erase',175,40);
  8. context.strokeRect(75,100,200,200);
  9. context.fillRect(325,100,200,200);
  10. context.canvas.onmousedown=function(e){
  11. context.clearRect(0,0,canvas.width,canvas.height);
  12. };

js代码的大概结构为：

　　1. 使用document.getElementById()方法来获取指向canvas的引用。

　　2. 在canvas对象上调用getContext('2d')方法，获取绘图环境变量。

　　3. 然后通过绘图环境对象在canvas元素上进行绘制。

代码的前两行基本上是固定的。

　　lineJoin: 当两条线交汇时创建边角类型。

　　属性值：beval（斜角），round（圆角），miter（尖角，默认）。

　　lineWidth: 设置线条宽度，默认为1。

　　fillText(): 参数（按顺序）：要输出的文本，x坐标，y坐标，允许的最大文本宽度。

　　strokeRect(): 参数：x坐标，y坐标，宽度，高度。作用：为矩形描边，用strokeStyle, lineWidth, lineJoin, MiterLimit属性。

　　fillRect(): 参数同上。作用：填充矩形，用fillStyle属性。

　　clearRect(): 参数同上。将矩形与当前剪辑区域相交范围内的所有像素清除。

最新文章

  1. JS跳转后台
  2. [翻译]Kafka Streams简介: 让流处理变得更简单
  3. Jquery 常用总结
  4. UIAutomator 学习版
  5. 【Tarjan,LCA】【3-21个人赛】【problemD】
  6. hdu - 1083 - Courses
  7. 射频识别技术漫谈(29)——射频接口芯片TRF7960
  8. tomcat链接mysql时超时报错java.io.EOFException: Can not read response from server. Expected to read 4 bytes,
  9. 同一级目录js的引入
  10. word20161229
  11. can&#39;t open the mysql.plugin table. please run mysql_upgrade to create it.
  12. Objective-C 性能监控
  13. makefile 里的vpath
  14. ORA-01113 &amp; ORA-01110同时出现
  15. C#获取微信二维码显示到wpf
  16. OSSpinLockLock加锁机制，保证线程安全并且性能高
  17. emacs配置buffer的快捷键
  18. JVM之参数分配详解
  19. c/c++ 数组传参
  20. PHP.30-TP框架商城应用实例-后台6-商品会员价格删除-外键，级联操作

热门文章

  1. 在sublime text3下,用快捷键把文件打开到浏览器中
  2. Java语言程序设计（第三版）第二章课后习题答案（仅供参考）
  3. js 中//&lt;![CDATA[ 意义
  4. form.elements属性
  5. tmux　用z关闭之后的恢复
  6. python实现链表中倒数第k个结点
  7. spring-boot自定义启动端口
  8. python 线程的调用方式
  9. Bootstrap历练实例：弹出框(popover)事件
  10. C# 文件操作 常用的类