canvas實現簡單的畫圖功能
阿新 • • 發佈:2019-01-04
var bot;//畫布div
var X,Y,X1,Y1;//座標
var flag=0;
var time;//定時器ID
var color=0;//記住所選顏色
var lineW=2;//畫筆粗細
var canvas;//建立畫布
var context;//獲取上下文
var isMouseDown=false;//記錄滑鼠是否按下
window.onload=function(){
//建立畫布
canvas=document.getElementById("can" );
//獲取上下文
context=canvas.getContext("2d");
bot=document.getElementById("bottom");
bot.onmousedown=mouseDownAction;
bot.onmousemove=mouseMoveAction;
document.onmouseup=mouseUpAction;
}
/**
*選中畫筆顏色
*/
function pen_click(num){
var chk=document.getElementsByTagName("input");
for(var i=0;i<chk.length;i++){
if(i==num){
chk[i].checked=true;
color=i;
}else {
chk[i].checked="";
}
}
}
/**
* 畫筆粗細
*/
function line_wid(num){
lineW=num;
}
/**
*滑鼠按下
*/
function mouseDownAction(e){
isMouseDown=true;
//記錄下滑鼠點選的時候的位置
X= e.offsetX;
Y= e.offsetY;
}
/**
*滑鼠移動
*/
function mouseMoveAction(e){
if(isMouseDown){
X1= e.offsetX;
Y1= e.offsetY;
drowline(X,Y,X1,Y1);
flag++;
}
}
/**
*滑鼠彈起來
*/
function mouseUpAction(e){
isMouseDown=false;
flag=0;
}
/**
* 繪製
*/
function drowline(num1,num2,num3,num4){
//開啟新的路徑
if(flag)
context.beginPath();
//移動畫筆的初始位置
context.moveTo(num1,num2);
context.lineWidth=lineW;
if(color==0){
context.strokeStyle="red";
}else if(color==1){
context.strokeStyle="green";
}else if(color==2){
context.strokeStyle="blue";
}
//移動畫筆的結束位置
context.lineTo(num3,num4);
//開始繪製
context.stroke();
if(flag!=0){
X=X1;
Y=Y1;
}
}
function save_pic(){//儲存畫圖
var div=document.getElementsByClassName("div");
if(div[div.length-1].innerHTML!=""){
alert("儲存空間已滿,無法儲存,請清除空間!")
}
var str=canvas.toDataURL("image/png",0.92);
for(var i=0;i<div.length;i++){
if(div[i].innerHTML==""){
var s="<img src='"+str+"' style='width: 250px;height: 250px;'>";
div[i].innerHTML=s;
break;
}
}
}
function clear_pic(){//清除畫布
context.clearRect(0,0,500,500);
}
function clear_save(){//清除儲存
var div=document.getElementsByClassName("div");
for(var i=0;i<div.length;i++){
div[i].innerHTML="";
}
}