html5如何实现画板画笔功能

发布时间:2022-03-03 09:45:27 作者:小新
来源:亿速云 阅读:152

这篇文章主要介绍了html5如何实现画板画笔功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

  实现画板画笔功能,效果如下:

  1 <div>

  2     <!--画板-->

  3     <canvas id="box1" height="400" width="400" style="background-color: antiquewhite"></canvas>

  4     <!--保存并显示鼠标X轴位置-->

  5     <label id="lab_X"></label>

  6     <!--保存并显示鼠标Y轴位置-->

  7     <label id="lab_Y"></label>

  8 </div>

  1 $(function () {

  2             var canvas = document.getElementById("box1");

  3             if (canvas == null)

  4                 return false;

  5             var context = canvas.getContext("2d");

  6             //标记开始书写

  7             var start = false;

  8             $(canvas)。mousemove(function (event) {

  9                 //显示当前鼠标位置

  10                 $("#lab_X")。text(event.pageX);

  11                 $("#lab_Y")。text(event.pageY);

  12                 if (start) {

  13                     context.lineTo(event.pageX, event.pageY);

  14                     context.stroke();

  15                 }

  16             });

  17             //鼠标按下,开始书写

  18             $(canvas)。mousedown(function () {

  19                 context.beginPath();

  20                 context.moveTo($("#lab_X")。text(), $("#lab_Y")。text());

  21                 start = true;

  22             });

  23             //鼠标抬起,结束书写

  24             $(canvas)。mouseup(function () {

  25

  26                 start = false;

  27                 context.closePath();

  28             });

  29         });

感谢你能够认真阅读完这篇文章,希望小编分享的“html5如何实现画板画笔功能”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. HTML5 canvas 在线画笔绘图工具(一) 功能介绍
  2. IOS如何实现画板功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5

上一篇:html5中的锚点链接怎么做

下一篇:CSS3中的网格背景应该如何实现

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》