canvas画图板

PROMULGATOR

liushaoye

上海市

← css三级菜单导航

→ 高德地图的点聚合

相关代码

canvas画图板

canvas画ladingview

canvas炫酷时钟

Html

Css

Js

* {
	margin:0;
	padding:0
}
html,body {
	background:#000;
	overflow:hidden;
	text-align:center;
}
canvas {
	background:#fff;
}

window.onload = function() {
     var clear = false;
     var oCan = document.querySelector('canvas');
     var oClear = document.querySelector('#clear');
     oClear.onclick = function() {
         clear = true;
         console.log(clear)
     };
     var oWrite = document.querySelector('#write');
     oWrite.onclick = function() {
         clear = false;
         console.log(clear)
     };
     var gd = oCan.getContext('2d');
     var X = (document.documentElement.clientWidth - oCan.width) / 2;
     window.onresize = function() {
         X = (document.documentElement.clientWidth - oCan.width) / 2;
     };
     oCan.onmousedown = function(ev) {
         gd.beginPath();
         gd.moveTo(ev.clientX - X, ev.clientY);
         oCan.onmousemove = function(ev) {
             gd.lineTo(ev.clientX - X, ev.clientY);
             if (clear) {
                 console.log(1111111);
                 gd.strokeStyle = '#fff';
                 gd.lineWidth = 20
             } else {
                 console.log(222222222);
                 gd.strokeStyle = '#000';
                 gd.lineWidth = 1
             }
             gd.stroke()
         };
         oCan.onmouseup = function() {
             oCan.onmousemove = oCan.onmouseup = null;
         };
         return false

}
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas画图板



代码描述：canvas画图板

画图板，直接用鼠标点击移动就可以在画板上绘图，点击擦除，是橡皮擦效果。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas画图板-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号