码迷,mamicode.com
首页 > 其他好文 > 详细

canvas绘图history妙用

时间:2019-01-19 12:12:15      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:stroke   else   push   cat   红色   绘制   canvas   状态   绘图   

function palette(canvas,ctx){   //初始化画布内部元素默认样式
this.strokeColor = ‘red‘; //默认选中红色触发颜色
this.fillColor = ‘green‘; //默认选中绿色填充色
this.style = ‘tablet‘; //默认选中直线形状
this.type = ‘stroke‘; //默认的绘制方式是划
this.ctx = ctx; //默认为绘图环境
this.canvas = canvas; //默认画布
this.canvasW = canvas.width; //默认画布宽
this.canvasH = canvas.height; //默认画布高
this.history = []; //默认的历史记录为数组,
this.edges = ‘3‘; //默认的边数为3
}

在切换绘图状态是都要对history 进行操作,不然将是两个不同画布的状态。
//  书写绘画函数
palette.prototype.drawing = function(){
//移动
if(move){
var that = this;
this.canvas.onmousedown = function(e) { //鼠标移动画布的函数
moving=true;
var point = getLocation(e.clientX,e.clientY);
//var s = getnear(point.x, point.y);
//console.log("+++++++++++"+s);
$.each(draws, function(n, v) {
restdraw(draws[n]);
if(ctx.isPointInPath(point.x, point.y)){
console.log("======================"+n);
// if(s==n){
moveItem = n;
console.log(n);
ctx.strokeStyle = "green";
//}
} else {
ctx.strokeStyle = "red";
}
ctx.stroke();
})
}
//获取鼠标移动时的坐标
canvas.onmousemove = function(e){
if( moving==false && moveItem < 0 ) {
return;
}
p.ctx.clearRect(0, 0, p.canvasW, p.canvasH);
var point = getLocation(e.clientX,e.clientY);
$.each(draws, function(n, v) {
if(n !== moveItem ){
ctx.strokeStyle = "red";
} else {
ctx.strokeStyle = "green";
draws[n].l1=point.x-draws[n].l3/2;
draws[n].l2=point.y-draws[n].l4/2;
}
restdraw(draws[n]);
ctx.stroke();
})
}
canvas.onmouseup = function(e){
moving = false;
moveItem =-1;
ctx.save();
that.history.push(that.ctx.getImageData(0,0,that.canvasW,that.canvasH));
}
}else{ //绘图
var that = this;
// console.log(this);
this.canvas.onmousedown = function(e){ //鼠标移动画布的函数
// * 获取鼠标起始位置
var sx = e.offsetX;
// 获取鼠标到时间源的宽度
// console.log(sx);
var sy = e.offsetY;
// 获取鼠标到时间源的高度
// console.log(sy);
that.init(); //初始化样式
if(that.style=="tablet"){
that.ctx.beginPath();
// beginPath() 方法开始一条路径,或重置当前的路径
that.ctx.moveTo(sx,sy);
// moveTo() 方法可把窗口的左上角移动到一个指定的坐标。
}
// 获取鼠标移动时的坐标
canvas.onmousemove = function(e){
var mx = e.offsetX;
// console.log(mx);
var my = e.offsetY;
// console.log(my);
if (that.style!= "eraser") {
that.ctx.clearRect(0, 0, that.canvasW, that.canvasH);
// console.log(that.canvasW + ‘,‘ + that.canvasH);
// 清除鼠标在画布移动的填充色
if(that.history.length>0){ //注:只能是that.history数组的长度大于0,才可以putImageData()
that.ctx.putImageData(that.history[that.history.length-1],0,0);
// putImageData() 方法将图像数据(从指定的 ImageData 对象)放回画布上。
}
}
// console.log(that.history.length);
that[that.style](sx,sy,mx,my);
}
// 获取鼠标移走的坐标
canvas.onmouseup = function(){
that.history.push(that.ctx.getImageData(0,0,that.canvasW,that.canvasH));
// getImageData() 方法返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。
this.onmousemove=null;
// 清空鼠标移动事件
this.onmouseup=null;
// 清空鼠标移出事件
}
}
}

}

canvas绘图history妙用

标签:stroke   else   push   cat   红色   绘制   canvas   状态   绘图   

原文地址:https://www.cnblogs.com/zeussbook/p/10291170.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!