Html5 Canvas开发之鼠标绘图和方块移动
2012-11-17 01:53
357 查看
1.鼠标绘图
2.方块移动
3.Canvas开发注意事项 canvas画布宽高定义
此定义方式为按(默认大小)比例矢量放大缩小,如果要定义宽高应如下定义
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white;} span{ color:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oC.onmousedown = function(ev){ var ev = ev || window.event; oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop); document.onmousemove = function(ev){ var ev = ev || window.event; oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop); oGC.stroke(); }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; }; }; </script> </head> <body> <canvas id="c1" width="400" height="400"> <span>不支持canvas浏览器</span> </canvas> <!--默认:宽300 高150--> </body> </html>
2.方块移动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white;} span{ color:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var num = 0; oGC.fillRect(0,0,100,100); setInterval(function(){ num++; oGC.clearRect(0,0,oC.width,oC.height); oGC.fillRect(num,num,100,100); },30); }; </script> </head> <body> <canvas id="c1" width="400" height="400"> <span>不支持canvas浏览器</span> </canvas> <!--默认:宽300 高150--> </body> </html>
3.Canvas开发注意事项 canvas画布宽高定义
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white; width:600px; height:300px;} span{ color:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var num = 0; oGC.fillRect(0,0,100,100); }; </script> </head> <body> <canvas id="c1"> <span>不支持canvas浏览器</span> </canvas> <!--默认:宽300 高150--> </body> </html>
此定义方式为按(默认大小)比例矢量放大缩小,如果要定义宽高应如下定义
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black;} #c1{ background:white; } span{ color:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var num = 0; oGC.fillRect(0,0,100,100); }; </script> </head> <body> <canvas id="c1" width:600px; height:300px;> <span>不支持canvas浏览器</span> </canvas> <!--默认:宽300 高150--> </body> </html>
相关文章推荐
- HTML5开发之Canvas绘图之实战入门
- HTML5 Canvas 开发 绘图方法整理 【十、Canvas渐变、图形渐变&&文字渐变】
- HTML5 Canvas 开发 绘图方法整理 【十三、Canvas重点之:状态 】
- [HTML5-SVG,VML,CANVAS]Web开发中的矢量绘图(vml,svg)处理和应用
- HTML5 Canvas 开发 绘图方法整理 【三、canvas线条样式、线帽】
- HTML5 Canvas 开发 绘图方法整理 【十一、Canvas图形阴影&&文字阴影效果】
- HTML5 Canvas 开发 绘图方法整理 【十四、将 Canvas画布 作为图片保存并下载】
- HTML5 Canvas 开发 绘图方法整理 【十二、Canvas重点之:路径 】
- HTML5 Canvas 开发 绘图方法整理 【五、canvas text / 文本、文字相关】
- HTML5 Canvas 开发 绘图方法整理 【六、canvas image /canvas绘制图片、平铺图片】
- HTML5 Canvas 开发 绘图方法整理 【一、需要了解的基础内容】
- HTML5 Canvas 开发 绘图方法整理 【八、Canvas 转换】
- HTML5 Canvas 开发 绘图方法整理 【二、canvas直线 & canvas矩形】
- HTML5 Canvas 开发 绘图方法整理 【九、Canvas旋转、缩放】
- HTML5 移动开发 -- Canvas 绘图 9.1 矩形,填充三角形
- html5 canvas绘图工具开发备忘
- HTML5 Canvas 开发 绘图方法整理 【四、canvas曲线图形 / 圆形】
- HTML5 移动开发 -- Canvas 绘图 9.2 三角形路径绘制, 圆, 圆弧,二元三元抛物线, 渐变
- HTML5 Canvas 绘图方法整理 【十五、Canvas页面交互: 鼠标事件 】
- Html5 Canvas开发之插入图片、设置背景、渐变、文本、阴影