[Web] 整個網頁都是我的繪圖板

前言

將之前做的畫圖做成小插件。

介紹

點擊開始亂畫就可以開始畫圖囉。

使用方法

開始亂畫拉到書籤或我的最愛,如此一來在想畫畫的網頁按下連結就可以開始作畫了。

大概就是像這樣。

程式

將之前做的程式稍微修改一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var cnv = document.createElement("div");
cnv.style.position = "absolute";
cnv.style.height = "0px";
cnv.style.width = "0px";
cnv.style.top = "0px";
cnv.style.left = "0px";
cnv.style.zIndex = "9999";
document.body.appendChild(cnv);
var jg = new jsGraphics(cnv);
jg.setStroke(3);
var mousePress = false ;
var nowMouseX , nowMouseY;
var pastMouseX , pastMouseY ;
$(document).mousemove(function (e) {
pastMouseX = nowMouseX , paseMouseY = nowMouseY ;
nowMouseX = e.pageX + document.documentElement.scrollTop;
nowMouseY = e.pageY + document.documentElement.scrollLeft;
if ( mousePress === true ){
jg.drawLine(pastMouseX,paseMouseY,nowMouseX,nowMouseY);
jg.paint();
}
});
$(document).mousedown(function (e) {
mousePress = true ;
});
$(document).mouseup(function (e) {
mousePress = false ;
});

不知道為什麼有的網頁不能用,像是FB。

GitHub

Paint.js