原文:canvas-画图改进版
前几天在canvas——画板中做了个很简陋的画板，只能画简单的线条，可以选择颜色和线条粗度，今天在此简陋的画板上增加了新的形状，撤销，保存，橡皮擦等功能，虽然功能还是很简单，刚接触canvas，过程中还是遇到了很多困难。
形状包括：铅笔、直线、直角矩形，圆角矩形、原型（利用圆角矩形能够画出很多其他好玩的图形）
提供橡皮擦、撤销、重做、清屏、保存功能
1、html中使用两个canvas，一个相当于蒙版用于缓存
<div id="imgContent">
<canvas id="canvas" width="600" height="490">
浏览器不支持~
</canvas>
<!--此canvas用于暂存graph，绘制过程中需要清除context，因而需要缓存，否则更换形状时会出现问题 -->
<canvas id="canvasTemp"width="600" height="490" > </canvas>
</div>
2、主要鼠标事件：
$(canvasTemp).unbind();
$(canvasTemp).bind('mousedown',down);
$(canvasTemp).bind('mousemove',move);
$(canvasTemp).bind('mouseup',up);
$(canvasTemp).bind('mouseout',out);
3、更换图形时需清空蒙版canvas即canvasTemp的context环境，并且将上次绘制内容添加到canvas中
4、另外需要为各种形状添加鼠标移动时的图标，例如选择circle时鼠标未按下时需要绘制一个小圆
else if(type === "circle"){
clearContext();
if(mouseState === true){ //鼠标按下时
ctxTemp.beginPath();
var radius = Math.sqrt((oldX - newX) * (oldX - newX) + (oldY - newY) * (oldY - newY));
ctxTemp.arc(oldX,oldY,radius,0,Math.PI * 2,false);
ctxTemp.stroke();
}else{
//鼠标没有按下时出现小圆
ctxTemp.beginPath();
//ctxTemp.strokeStyle ='#9F35FF';
ctxTemp.arc(newX,newY,10 ,0, Math.PI * 2,false);
ctxTemp.stroke();
}
5、需要存储绘制的过程，以便撤销和重做
function saveImageHistory(){
cancelTimes = 0;
imageHistoryList.push(canvas.toDataURL());
if(imageHistoryList.length > 0){
document.getElementById("undoImage").src="./images/undo.png";
}
}
6、由于body背景设置为蓝色，canvas fill 的是白色，因而用橡皮擦时如果直接用clearRect会擦出蓝色背景，因而采用填充白色代替
//ctx.clearRect(newX - lineWeight * 10 , newY - lineWeight * 10 , lineWeight * 20 , lineWeight * 20); //重新填充白色背景，否则擦出后是颜色背景 ctx.fillStyle = "white"; ctx.fillRect(newX - lineWeight * 10 , newY - lineWeight * 10 , lineWeight * 20 , lineWeight * 20);
7.问题总结：
1）body为蓝色背景，因而想将canvas背景设置为白色，然后尝试将canvas设置背景，这种方式是不行的，只能使用fillRect方式为canvas填充背景，此种方式为橡皮擦的擦除带来了问题，橡皮擦的擦除应该也使用fillRect方式而不能使用clearRect方式
2）DOM中定义的id会再javasvript中以变量自动定义，因而一定注意js中与id同名的变量或者方法可能不起作用
3）使用原生js时事件解绑中遇到问题，尝试了removeEventListener和最原始的将绑定事件置为null，但是没起作用，没找到解决方法因而使用了jQuery的unbind，希望有人指导
8.代码：
var canvas,
ctx,
canvasTemp,
ctxTemp,
mouseState = false, //初始化鼠标是否按下和坐标点位置, true为按下
oldX = 0,
oldY = 0,
pencilX = 0,
pencilY = 0,
lineColor = "black",
lineWeight = 1,
canvasTop,
canvasLeft,
canvasWidth = 700,
canvasHeight = 550,
cancelTimes = 0, //撤销次数
imageHistoryList = new Array(); //存储图片绘制历史信息
onLoad(function(){
init(); //初始化canvas
//颜色和线宽绑定点击事件
var colorDiv = document.getElementById("color");
var lineDiv = document.getElementById("lineWeight");
colorDiv.addEventListener("click", chosen);
lineDiv.addEventListener("click", chosen);
document.getElementById("pencil").click(); //未选择图形时默认为铅笔
document.getElementById("blackBtn").click(); //默认黑色
document.getElementById("line1").click(); //默认线宽2px
});
var chosen = function(event){
var parentNode = event.target.parentNode;
for(var i=0; i<parentNode.childNodes.length; i++){
parentNode.childNodes[i].className = "";
}
event.target.className = "chosen";
};
var init = function(){
//初始化canvas
canvas = document.getElementById("canvas");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
//判断是否支持canvas
if(!canvas || !canvas.getContext){
return false;
}
ctx = canvas.getContext("2d");
//初始化画图区域白色背景
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 700, 550);
//初始化canvasTemp
canvasTemp = document.getElementById("canvasTemp");
canvasTemp.width = canvasWidth;
canvasTemp.height = canvasHeight;
ctxTemp = canvasTemp.getContext("2d");
canvasTop = canvas.offsetTop,
canvasLeft = canvas.offsetLeft;
//初始化撤销和重做按钮状态
document.getElementById("undoImage").src="./images/undoDis.png";
document.getElementById("redoImage").src="./images/redoDis.png";
};
//绘制picture
var drawPicture = function(type, obj){
var down, //鼠标按下事件
up, //鼠标弹起事件
move, //鼠标移动事件
out, //鼠标离开区域
chosen, //图形选中
clearContext; //清除canvas环境
down = function(event){
mouseState = true;
event = event || window.event;
oldX = event.clientX - canvasLeft;
pencilX = event.clientX - canvasLeft;
oldY = event.clientY - canvasTop;
pencilY = event.clientY - canvasTop;
ctxTemp.strokeStyle = lineColor;
ctxTemp.lineWidth = lineWeight;
ctxTemp.lineCap = "round";
clearContext();
ctxTemp.moveTo(oldX, oldY);
if(type === "rubber"){
//ctx.clearRect(oldX-lineWeight*10, oldY-lineWeight*10, lineWeight*20, lineWeight*20);
//重新填充白色背景，否则擦出后是颜色背景
ctx.fillStyle = "white";
ctx.fillRect(oldX-lineWeight*10, oldY-lineWeight*10, lineWeight*20, lineWeight*20);
}
};
up = function(event){
//更改鼠标状态
mouseState = false;
event = event || window.event;
//将canvasTemp中graph添加到canvas中
var image = new Image();
if(type !== "rubber"){
image.src = canvasTemp.toDataURL();
image.onload = function(){
ctx.drawImage(image, 0, 0, image.width, image.height);
clearContext();
//保存历史记录，撤销时使用
saveImageHistory();
};
}
};
chosen = function(obj){
var shape = document.getElementById("shape");
for(var i=0; i<shape.childNodes.length; i++){
shape.childNodes[i].className = "";
}
if(type !== "rubber"){
document.getElementById("rubber").className = "";
}
obj.className = "chosen";
};
//鼠标按下，拖动画图
move = function(event){
var newX = event.clientX - canvasLeft;
var newY = event.clientY - canvasTop;
if(type === "pencil"){
if(mouseState === true){
ctxTemp.beginPath();
ctxTemp.moveTo(pencilX, pencilY);
ctxTemp.lineTo(newX, newY);
ctxTemp.stroke();
pencilX = newX;
pencilY = newY;
}
}else if(type === "rec"){
clearContext();
if(mouseState === true){
ctxTemp.beginPath();
ctxTemp.moveTo(oldX, oldY);
ctxTemp.lineTo(newX, oldY);
ctxTemp.lineTo(newX, newY);
ctxTemp.lineTo(oldX, newY);
ctxTemp.lineTo(oldX, oldY);
ctxTemp.stroke();
}else{
//鼠标移动时出现矩形
ctxTemp.beginPath();
ctxTemp.moveTo(newX - 10 , newY - 10 );
ctxTemp.lineTo(newX + 10 , newY - 10 );
ctxTemp.lineTo(newX + 10 , newY + 10 );
ctxTemp.lineTo(newX - 10 , newY + 10 );
ctxTemp.lineTo(newX- 10 , newY - 10 );
ctxTemp.stroke();
}
}else if(type === "line"){
if(mouseState === true){
ctxTemp.beginPath();
clearContext();
ctxTemp.moveTo(oldX, oldY);
ctxTemp.lineTo(newX, newY);
ctxTemp.stroke();
}
}else if(type === "circle"){
clearContext();
if(mouseState === true){
ctxTemp.beginPath();
var radius = Math.sqrt((oldX - newX) * (oldX - newX) + (oldY - newY) * (oldY - newY));
ctxTemp.arc(oldX,oldY,radius,0,Math.PI * 2,false);
ctxTemp.stroke();
}else{
//鼠标没有按下时出现小圆
ctxTemp.beginPath();
//ctxTemp.strokeStyle ='#9F35FF';
ctxTemp.arc(newX,newY,10 ,0, Math.PI * 2,false);
ctxTemp.stroke();
}
}else if(type === "roundRec"){
clearContext();
if(mouseState === true){
ctxTemp.beginPath();
ctxTemp.moveTo(oldX, oldY);
ctxTemp.lineTo(newX, oldY);
ctxTemp.arcTo(newX+20,oldY, newX+20, oldY+20, 20);
ctxTemp.lineTo(newX+20, newY);
ctxTemp.arcTo(newX+20,newY+20, newX, newY+20, 20);
ctxTemp.lineTo(oldX, newY+20);
ctxTemp.arcTo(oldX-20,newY+20, oldX-20, newY, 20);
ctxTemp.lineTo(oldX-20, oldY+20);
ctxTemp.arcTo(oldX-20,oldY, oldX, oldY, 20);
ctxTemp.stroke();
}else{
//鼠标没有按下时出现小的圆角矩形
ctxTemp.beginPath();
//ctxTemp.strokeStyle ='#9F35FF';
ctxTemp.moveTo(newX - 10 , newY - 10);
ctxTemp.lineTo(newX, newY - 10);
ctxTemp.arcTo(newX + 10,newY - 10, newX + 10, newY, 10);
ctxTemp.lineTo(newX + 10, newY + 10);
ctxTemp.arcTo(newX + 10, newY + 20, newX, newY + 20, 10);
ctxTemp.lineTo(newX - 10, newY + 20);
ctxTemp.arcTo(newX - 20,newY + 20, newX - 20,newY + 10,10);
ctxTemp.lineTo(newX - 20,newY);
ctxTemp.arcTo(newX - 20,newY - 10, newX - 10,newY - 10, 10);
ctxTemp.stroke();
}
}else if(type === "rubber"){
//鼠标没有按下时出现橡皮擦图标
ctxTemp.beginPath();
clearContext();
ctxTemp.strokeStyle = '#000000';
ctxTemp.moveTo(newX - lineWeight * 10 , newY - lineWeight * 10 );
ctxTemp.lineTo(newX + lineWeight * 10 , newY - lineWeight * 10 );
ctxTemp.lineTo(newX + lineWeight * 10 , newY + lineWeight * 10 );
ctxTemp.lineTo(newX - lineWeight * 10 , newY + lineWeight * 10 );
ctxTemp.lineTo(newX- lineWeight * 10 , newY - lineWeight * 10 );
ctxTemp.stroke();
if(mouseState === true){
//ctx.clearRect(newX - lineWeight * 10 , newY - lineWeight * 10 , lineWeight * 20 , lineWeight * 20);
//重新填充白色背景，否则擦出后是颜色背景
ctx.fillStyle = "white";
ctx.fillRect(newX - lineWeight * 10 , newY - lineWeight * 10 , lineWeight * 20 , lineWeight * 20);
}
}
};
out = function(){
clearContext();
};
clearContext = function(){
ctxTemp.clearRect(0,0,canvas.width,canvas.height);
};
//将选中的形状置为选中状态
chosen(obj);
//canvas添加鼠标事件, 鼠标移动、鼠标按下和鼠标弹起
/*
canvasTemp.addEventListener("mousemove", move);
canvasTemp.addEventListener("mousedown", down);
canvasTemp.addEventListener("mouseup", up);
canvasTemp.addEventListener("mouseout", out);
*/
/*
* 本来尝试使用原生js来写，但是在上面的事件解绑中遇到问题
* 尝试了removeEventListener和最原始的将绑定事件置为null，但是没起作用，没找到解决方法因而使用了jQuery的unbind
*
*/
$(canvasTemp).unbind();
$(canvasTemp).bind('mousedown',down);
$(canvasTemp).bind('mousemove',move);
$(canvasTemp).bind('mouseup',up);
$(canvasTemp).bind('mouseout',out);
};
/*
* 保存picture历史记录
*/
function saveImageHistory(){
cancelTimes = 0;
imageHistoryList.push(canvas.toDataURL());
if(imageHistoryList.length > 0){
document.getElementById("undoImage").src="./images/undo.png";
}
}
var exportImage = function(event){
var imgSrc = canvas.toDataURL("image/png");
document.getElementById("image").src = imgSrc;
};
/*
* undo 撤销一次
*/
var undo = function(){
cancelTimes++;
if(cancelTimes >= imageHistoryList.length+1){
cancelTimes--;
return;
}else if(cancelTimes == imageHistoryList.length){
document.getElementById("redoImage").src="./images/redo.png";
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
document.getElementById("undoImage").src="./images/undoDis.png";
}else{
document.getElementById("redoImage").src="./images/redo.png";
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
var image = new Image();
image.src = imageHistoryList[imageHistoryList.length-1-cancelTimes];
image.onload = function(){
ctx.drawImage(image, 0, 0, image.width, image.height);
};
}
};
/*
* redo，重做上一次操作
*/
var redo = function(){
cancelTimes--;
if(cancelTimes < 0){
cancelTimes++;
return;
}else{
if(cancelTimes == 0){
document.getElementById("redoImage").src="./images/redoDis.png";
document.getElementById("undoImage").src="./images/undo.png";
}
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
var image = new Image();
image.src = imageHistoryList[imageHistoryList.length-1-cancelTimes];
image.onload = function(){
ctx.drawImage(image, 0, 0, image.width, image.height);
};
}
};
/**
*清屏
*/
function clearScreen(){
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctxTemp.clearRect(0, 0, canvasWidth, canvasHeight);
}
/**
* 工具函数onLoad，当文档载入完成时调用一个函数
*/
function onLoad(f){
if(onLoad.loaded){
window.setTimeout(f,0);
}else if(window.addEventListener){
window.addEventListener("load",f,false);
}else if(window.attachEvent){
window.attachEvent("onload",f);
}
}
onLoad.loaded = false;
onLoad(function(){
onLoad.loaded = true;
});
时间： 2024-11-30 09:18:56