设为首页收藏本站

IT技术擎 - 最棒的IT web技术交流社区

 找回密码
 注册为IT技术擎人

QQ登录

只需一步,快速开始

搜索
热搜: php h5 jquery
查看: 43|回复: 0

[未分类] Canvas入门笔记-实现极简画笔

[复制链接]

1万

主题

1万

帖子

4万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
40461
发表于 2018-1-31 01:27:38 | 显示全部楼层 |阅读模式
今天学习了Html5 Canvas入门,已经有大神写得很详细了http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#8
在学习过后自己写了一个简单的扩展
实现画板画笔功能,效果如下:

  1. 1 <
  2. div >
  3. 2 <!--画板-- >
  4. 3 <
  5. canvas id="box1"height="400"width="400"style="background-color: antiquewhite" > </canvas >
  6. 4 <!--保存并显示鼠标X轴位置-- >
  7. 5 <
  8. label id="lab_X" > </label >
  9. 6 <!--保存并显示鼠标Y轴位置-- >
  10. 7 <
  11. label id="lab_Y" > </label >
  12. 8 </div >
复制代码
View Code
  1. 1$(function() {
  2. 2 varcanvas = document.getElementById("box1");
  3. 3 if(canvas == null)
  4. 4 returnfalse;
  5. 5 varcontext = canvas.getContext("2d");
  6. 6 //标记开始书写
  7. 7 varstart = false;
  8. 8 $(canvas).mousemove(function(event) {
  9. 9 //显示当前鼠标位置
  10. 10 $("#lab_X").text(event.pageX);
  11. 11 $("#lab_Y").text(event.pageY);
  12. 12 if(start) {
  13. 13 context.lineTo(event.pageX, event.pageY);
  14. 14 context.stroke();
  15. 15 }
  16. 16 });
  17. 17 //鼠标按下,开始书写
  18. 18 $(canvas).mousedown(function() {
  19. 19 context.beginPath();
  20. 20 context.moveTo($("#lab_X").text(), $("#lab_Y").text());
  21. 21 start = true;
  22. 22 });
  23. 23 //鼠标抬起,结束书写
  24. 24 $(canvas).mouseup(function() {
  25. 25
  26. 26 start = false;
  27. 27 context.closePath();
  28. 28 });
  29. 29 });
复制代码
View Code



上一篇:基于Java Mail 进行发送(带附件和压缩附件)的邮件
下一篇:利用跨站脚本攻击Eclipse本地Web服务器(1)
该用户未在地球留下任何的痕迹

本版积分规则

QQ|小黑屋|帮助|IT技术擎 ( 沪ICP备15054863号  

GMT+8, 2018-11-19 06:43

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表