canvas 在线画图
生活随笔
收集整理的這篇文章主要介紹了
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 在线画图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android jni 结构体_Andr
- 下一篇： 机器学习--digits手写字体