如何用canvas设计简易作画工具？

最新推荐文章于 2024-06-27 15:04:50 发布

WhereIsMyChair

最新推荐文章于 2024-06-27 15:04:50 发布

阅读量368

点赞数

本文链接：https://blog.csdn.net/qq_32662795/article/details/103868505

版权

1.先考虑做简单的，在其他博客复制好代码之后改造一下，效果如图：

2.代码如下：

<head>
    <meta charset="UTF-8">
    <title>画画板</title>
    <style>
        body{
            background-color:#ccc;
        }
        .control-bar{
            vertical-align:top;
            display:inline-block;
        }
        button{
			border:4px gray;
			padding:10px 10px; 
			background:#15288fa1;
			width:100px;
			border-radius:10px;
			box-shadow:10px 10px 10px #a7afd99c;
			color:white;
		}
		button:hover {
		    background-color: #155aafa1; /* Green */
		    color: white;
		}

		#colorBtn{
			width:60px;
			height: 25px;
		    border:0px;
			/*border:4px #cccccc;
			background-color: #cccccc; */

		}
    </style>
</head>


<canvas id="myCanvas"></canvas>

<div class="control-bar">
    <button id="clearBtn">清屏</button>
    <button id="penBtn">画笔</button>
    <input type="range" name="points" id="penSize" min="1" max="50" value = "2" style="display: none;" /><!--拖动条--> 
    <input type="color" id="colorBtn">
    <button id="eraserBtn">橡皮擦</button>
    <button onclick="pic_cancel()">撤销</button>
</div>

<div style="display: none;" id = "size">
	 
</div>


<script>
    (function(){
        var w=800;//画画板的宽度
        var h=600; //画画板的高度

        //获取相关元素
        var canvas=document.getElementById("myCanvas");
        var penBtn=document.getElementById("penBtn");
        var colorBtn=document.getElementById("colorBtn");
        var eraserBtn=document.getElementById("eraserBtn");
        var clearBtn=document.getElementById("clearBtn");
        var penSize = document.getElementById("penSize");
		var size = document.getElementById("size");
        //画布大小设置
        canvas.width=w;
        canvas.height=h;
        canvas.style.backgroundColor="#fff";
        //获取绘图环境
        var ctx=canvas.getContext("2d");
        //鼠标按下事件
        canvas.onmousedown=function(ev){
            //求鼠标此时坐标
            var x=ev.clientX-canvas.getBoundingClientRect().left;//getBoundingClientRect用于获取某个元素相对于视窗的位置集合
            var y=ev.clientY-canvas.getBoundingClientRect().top;//32画笔/橡皮擦的宽度用于准确的定位

            //开启路径 绘制起点
            ctx.beginPath();
            ctx.moveTo(x,y);

            //鼠标移动
            canvas.onmousemove=function(ev){
                //求鼠标此时坐标
                var x=ev.clientX-canvas.getBoundingClientRect().left;
                var y=ev.clientY-canvas.getBoundingClientRect().top;
                ctx.lineTo(x,y);

                //绘制
                ctx.stroke();
            }
        }
        //鼠标抬起
        canvas.onmouseup=function(){
            this.onmousemove=function(){}
        }
        setPen();//默认画笔
        //点击橡皮擦
        eraserBtn.onclick=setEraser;
        //点击画笔
        penBtn.onclick=setPen;
        //点击颜色选择
        colorBtn.onchange=setPen;
        //点击清屏
        clearBtn.onclick=function(){
            //ctx.clearRect(0,0,w,h)//和下面两种变法任选其一
            canvas.width=canvas.width;
            //重新设置画布的宽度，可以清除屏幕
            setPen();
        }
        //设置为画笔的函数
        function setPen(){
        	//size.style.display = "block";
            ctx.lineWidth=penSize.value;
            ctx.strokeStyle=colorBtn.value;
            //document.body.style.cursor="url('./images/brush.ico'),auto";
        }
        //设置为橡皮擦的函数
        function setEraser(){
            //ctx.lineWidth=20;
            ctx.strokeStyle="#fff";
            document.body.style.cursor="url('./images/Eraser.ico'),auto";
        }
	    document.onclick = function(e){
	        var e = e || window.event; //浏览器兼容性
	        var elem = e.target || e.srcElement;
	        while (elem) { //循环判断至跟节点，防止点击的是div子元素
	            if (elem.id && elem.id=='size'  ) {
	                return;
	            }else if(elem.id && elem.id=='penBtn'){
	            	penSize.style.display = "inline-block";
	            	penBtn.style.display = "none";
	            	return;
	            }//如果还有别的div不想点击，就加else if判断

	            elem = elem.parentNode;
	        }
	        //这里写你想实现的效果
	        penSize.style.display = "none";
	        penBtn.style.display = "inline-block";

	        ctx.lineWidth=penSize.value;
	    };
	    document.onmousedown = canvas_copy();
    })();
    var imgData;
    function canvas_copy(){
        var context = document.getElementById("myCanvas").getContext('2d');
        var width = context.canvas.width;
        var height = context.canvas.height;
        imgData = context.getImageData(0, 0, width, height);
    }

    function canvas_paste(){
        var context = document.getElementById("myCanvas").getContext('2d');
        context.putImageData(imgData,0,0);
    }

    function pic_cancel(){
        canvas_paste();
    }

</script>

WhereIsMyChair

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何用canvas设计简易作画工具？

1.先考虑做简单的，在其他博客复制好代码之后改造一下，效果如图：2.代码如下：<head> <meta charset="UTF-8"> <title>画画板</title> <style> body{ background-color:#ccc; ...
复制链接

扫一扫