欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

canvas 在线画图

发布时间：2023/12/10 40 豆豆
生活随笔 收集整理的这篇文章主要介绍了 canvas 在线画图 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

canvas 在线画图

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">/*画图大师来了*/#cans{border:1px solid red;}</style><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript">$().ready(function () {var d=$("#cans").get(0).getContext("2d");d.lineWidth=5;// 画笔粗细 d.strokeStyle="blue"; // 画笔颜色var control=false; // 控制画 $("#cans").bind("mousedown", function (e) { // alert(e.pageX); //鼠标坐标 // alert(this.offsetLeft); //指 $("#cans") 边框与浏览器窗口左边的距离var mouseX= e.pageX-this.offsetLeft;var mouseY= e.pageY-this.offsetTop;control=true; // 鼠标按下时可以画 d.moveTo(mouseX,mouseY); // 开始画 起止位置 });$("#cans").bind("mouseup", function (e) {control=false;});$("#cans").bind("mousemove", function (e) {if(control){var mouseX= e.pageX-this.offsetLeft;var mouseY= e.pageY-this.offsetTop;d.lineTo(mouseX,mouseY); // 终止位置 d.stroke(); // 结束图形 }});});</script> </head> <body> <canvas id="cans" width="200" height="200">浏览器不支持canvas</canvas></body> </html>

 

转载于:https://www.cnblogs.com/gyz418/p/5289639.html

总结

以上是生活随笔为你收集整理的canvas 在线画图的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。