记录一个用canvas制作画图遇到的问题

最新推荐文章于 2022-08-18 18:59:29 发布

jtfyh

最新推荐文章于 2022-08-18 18:59:29 发布

阅读量578

点赞数

文章标签： css 前端 html5 javascript

本文链接：https://blog.csdn.net/jtfyh/article/details/122259734

版权

1.显示笔刷大小和颜色

css:

        #thisline{
            margin-left: 25px;
            height: 20px;
            width: 20px;
            box-sizing:border-box;
            border: 20px solid red;
            border-radius: 50%;
        }

html

            <div id="thisline"></div>

// brush为笔刷大小
// color为笔刷颜色


     function setBrush(){
         //设置笔刷展示
         $("#thisline").css("height",brush/2+"px")
         $("#thisline").css("width",brush/2+"px")
         $("#thisline").css("border",brush/2 + "px solid "+color)
     }

2.撤回功能

var saveBoard = {}; //保存记录 撤销操作用
var saveI = 0; //保存记录 顺序


function beginDraw(){
    // 开始画画
	// console.log("begin");
	// 记录开始前
	saveBoard[saveI] = board.getImageData(0,0,1920,1080);
	saveI = saveI+1;
	mousePress = true;
}

function  ctrlZ(){
	//撤销操作
	if (saveI-1 != 0){
		saveI=saveI-1;
	}else{
		saveI = 0;
	}
	board.putImageData(saveBoard[saveI],0,0)
}