画板

最新推荐文章于 2022-11-18 10:32:33 发布

linaGao

最新推荐文章于 2022-11-18 10:32:33 发布

阅读量288

点赞数 1

本文链接：https://blog.csdn.net/weixin_38292678/article/details/82877641

版权

简述画板：
首先设置一些属性：画板，画笔，创建数组imgArr放ImageData 对象
添加一些方法：draw，绑定mousedown，mousemove，mouseup，mouseleave，当画笔开始画的时候，获取当前位置，将x，y值传给move，mousemove，获取位置，lineTo（x,y），stroke(),mouseup,在画板上结束绘画，关闭路径，mouseleave,在画板外结束绘画，关闭路径，绘画结束，使用getimagedata获取画板各个位置的rhba值的data，添加在imgArr中，
事件：
撤销，将imgArr的最后一位pop出数组，使用putImgeData,将数据添加到画板上
橡皮擦，将画板的颜色变为白色
清屏，触发clearRect方法，
修改颜色，input方法的type为color，获取当前的$(this).val()设置画笔颜色
改变样式粗细，input方法的type为lineRuler，渲染出一个进度条

<li><input type="range"  id='lineRuler'  value="线条" min="1" max="20"></li>

获取进度条的值，修改画笔的粗细

//js
/**
 * drawing broad     nan.xue
 * canvas 
 * api
 * 
 */

var lineObj = {
    cavs: $('.cavs'),
    context: $('.cavs').get(0).getContext('2d'),
    colorChange: $('#colorChange'),
    cleanBoard: $('#colorChange'),
    eraser: $('#eraser'),   //橡皮
    rescind: $('#rescind'),  //撤销
    lineRuler: $('#lineRuler'),   //线条
    imgArr:[],
    bool: false,
    init: function () {
        // console.log(this.context)
        this.context.lineCap ='round';//线条起始和结尾样式
        this.context.lineJoin ='round';//转弯
        this.draw();
        this.clickBtn();
    },
    draw: function () {
        var self = this,
            cavs = this.cavs;
        var c_x = cavs.offset().left;  //画板的左边
        var c_y = cavs.offset().top;   //滑板的上面
        
        cavs.mousedown(function (e) {
            self.bool = true
            var m_x = e.pageX - c_x;    //计算获得画笔当前的位置，
            var m_y = e.pageY - c_y;
            self.context.beginPath();
            self.context.moveTo(m_x, m_y);
            console.log(m_x,m_y)
            // cavs.css('cursor', 'pointer');

            cavs.mousemove(function (e) {
                if (self.bool) {
                    self.context.lineTo(e.pageX - c_x, e.pageY - c_x);
                    self.context.stroke();
                }
            });
            cavs.mouseup(function () {
                self.context.closePath();
                self.bool = false
                console.log(0)
                // cavs.css('cursor', 'none');
            });
            cavs.mouseleave(function () {
                self.bool = false
                self.context.closePath();
                console.log(1)
                
                // cavs.css('cursor', 'none')如果用事件绑定的话 要记得用移除事件
            });

            var imgData = self.context.getImageData(0,0,self.cavs[0].width,self.cavs[0].height);
            self.imgArr.push(imgData);
            console.log(self.imgArr);
        });
    },
    clickBtn:function(){
        var self = this;
        $('.btn-list').on('click',function(e){
            e = e||window.event;
            switch(e.target.id){
                case 'cleanBoard':
                self.context.clearRect(0,0,self.cavs[0].width,self.cavs[0].height);
                break
                case 'eraser':
                self.context.strokeStyle = '#FFF';
                break
                case 'rescind':
                if(self.imgArr.length > 0){
                    self.context.putImageData(self.imgArr.pop(),0,0)
                }   
                break
            }
        })
        this.colorChange.change(function(event) {//当颜色改变时触发
			self.context.strokeStyle = $(this).val();//改变画笔颜色
		});
		this.lineRuler.change(function(event) {
			self.context.lineWidth = $(this).val();
		});

    }
}
lineObj.init();
//html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>drawing board</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
	<div class="wrapper">
		<canvas class="cavs" width="700" height="335">
			
		</canvas>
		<ul class="btn-list">
			<li><input type="color"  id='colorChange'></li>
			<li><input type="button" id='cleanBoard' value="清屏"></li>
			<li><input type="button" id='eraser' value="橡皮"></li>
			<li><input type="button" id='rescind' value="撤销"></li>
			<li><input type="range"  id='lineRuler'  value="线条" min="1" max="20"></li>
		</ul>
	</div>
	<script src="js/jquery.min.js"></script>
	<script src="js/index.js"></script>
</body>
</html>
//css
*{
	padding: 0;
	margin: 0;
	list-style: none;
}
body{
	background: url(../img/xhr.jpg) 0 0 no-repeat;
	background-attachment: fixed;
    background-size: cover;
}
.wrapper{
	width:700px ;
	height: 360px;
}
.wrapper canvas{
	border:1px solid royalblue;
	border-radius: 25px;
	box-shadow: 10px 10px 5px #888888;
	margin: 10px 0 0 10px;

}
.wrapper .btn-list{
	width: 100%;
	text-align: center;
	border-radius: 25px;
	margin-top: 10px;
	
}
.wrapper .btn-list li{
	display: inline-block;;	
	margin-left: 35px;
}
.wrapper .btn-list li input{
	background-color:yellow;
	color: black;
	border: none;
	padding: 6px 15px;
	font-size: 16px;
	cursor: pointer;
	border-radius: 25px;
	transition-duration:0.2s;
}
.wrapper .btn-list li input#lineRuler{
	/* margin-top: 10px; */
}
.wrapper .btn-list li input:hover{
	border:1px solid rebeccapurple;
	box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24);
}

linaGao

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
画板

//js/** * drawing broad nan.xue * canvas * api * */var lineObj = { cavs: $('.cavs'), context: $('.cavs').get(0).getContext('2d'), colorChange: $('#colorChange'), cleanBoa...
复制链接

扫一扫

画板

“相关推荐”对你有帮助么？