html5 canvas 鼠标绘制
2015-02-10 21:50
357 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> body{ background:pink; } #c1{ background:white; } </style> <script> window.onload = function () { var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oC.onmousedown = function (ev) { var ev = ev || event; oGC.moveTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop); document.onmousemove = function (ev) { var ev = ev || 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="300"> <span>请升级您的浏览器</span> </canvas> </body> </html>
相关文章推荐
- HTML5 canvas标签绘制正三角形 鼠标按下点为中间点,鼠标抬起点为其中一个顶点
- HTML5 Canvas绘制跟随鼠标移动的球
- 【实例】html5-canvas通过鼠标绘制线段
- 突袭HTML5之Canvas 2D入门1 - Canvas绘制文本和图像
- HTML5 Canvas 绘制齿轮【每日一段代码34】
- Oepnlayer结合HTML5 Canvas绘制底图与站点,可实现缩放平移
- 小强的HTML5移动开发之路(6)——Canvas图形绘制基础
- HTML5中使用canvas绘制矩形
- HTML5 之Canvas 绘制时钟 Demo
- HTML5 Canvas绘制实时时钟
- HTML5 Canvas: 绘制矩形
- HTML5_canvas(设置画笔样式、左右跑动的小块、绘制路径的方法、写字板、绘制圆形的方法、吃豆豆、绘制文本、环形进度条)设置一个模板
- 调用HTML5的Canvas API绘制图形的快速入门指南
- html5 canvas 绘制大转盘类似的游戏,并填充文
- 用canvas实现鼠标拖动绘制矩形框
- HTML5绘图之Canvas标签 绘制坐标轴
- [Html5 canvas]鼠标悬停吸附粒子背景特效
- 在html5的Canvas上绘制椭圆的几种方法总结
- HTML5 Canvas 绘制旋转45度佛教万字
- HTML5 Canvas 绘制澳大利亚国旗