Canvas實現畫圖工具
阿新 • • 發佈:2019-01-01
window.onload = function() {
var cvs = document.getElementById("mycanvas");
var plt = document.getElementById("mycanvas").getContext("2d");
var btn_1 = document.getElementById("reset");
var black = document.getElementById("color_0");
var blue = document.getElementById("color_1" );
var green = document.getElementById("color_2");
var red = document.getElementById("color_3");
var wth_1 = document.getElementById("wth_1");
var wth_2 = document.getElementById("wth_2");
var wth_3 = document.getElementById("wth_3");
var eraser = document.getElementById("eraser" );
var save = document.getElementById("save");
var is_eraser = false;
// plt.fillStyle = "#000";
// plt.strokeStyle = "#999"
// plt.lineWidth = 10;
// plt.lineJoin = "round";
// plt.fillRect(10,10,100,100);
// plt.strokeRect(10,10,100,100)
// plt.beginPath();
// plt.moveTo(10,10);
// plt.lineTo(10,100);
// plt.lineTo(100,100);
// plt.closePath();
// plt.stroke();
cvs.onmouseover = function(ev) {
ev.preventDefault();
}
cvs.onmousedown = function(ev) {
//每次都從一個新起點開始,會預設結束上一個。寫restore的話會閉合影象
plt.beginPath();
plt.moveTo(ev.pageX - cvs.offsetLeft, ev.pageY - cvs.offsetTop);
cvs.onmousemove = function(ev) {
plt.lineTo(ev.pageX - cvs.offsetLeft, ev.pageY - cvs.offsetTop);
plt.stroke();
}
}
document.onmouseup = function() {
cvs.onmousemove = null;
}
btn_1.onclick = function() {
plt.clearRect(0, 0, 600, 500);
}
black.onclick = function() {
if(!is_eraser){
plt.strokeStyle = "rgb(0,0,0)";
}
}
blue.onclick = function() {
if(!is_eraser){
plt.strokeStyle = "rgb(71,174,249)";
}
}
green.onclick = function() {
if(!is_eraser){
plt.strokeStyle = "rgb(165,222,55)";
}
}
red.onclick = function() {
if(!is_eraser){
plt.strokeStyle = "rgb(255,67,81)";
}
}
wth_1.onclick = function() {
if(!is_eraser){
plt.lineWidth = 1;
}
}
wth_2.onclick = function() {
if(!is_eraser){
plt.lineWidth = 3;
}
}
wth_3.onclick = function() {
if(!is_eraser){
plt.lineWidth = 5;
}
}
eraser.onclick = function(){
if (!is_eraser) {
plt.save();
plt.strokeStyle = "rgb(255,255,255)";
plt.lineWidth = 12;
eraser.innerHTML = "點選取消";
is_eraser = true;
$(cvs).css("cursor", "url('eraser.ico'),auto");
} else {
plt.restore();
eraser.innerHTML = "橡皮擦";
is_eraser = false;
$(cvs).css("cursor", "url('pen.ico'),auto");
}
}
save.onclick = function(){
//抄的,不理解為什麼這樣
var image = cvs.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image;
}
}