canvas画笔自定义笔触

最新推荐文章于 2021-10-26 09:48:01 发布

原创最新推荐文章于 2021-10-26 09:48:01 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

canvas 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了一种使用HTML5 Canvas实现自定义图案画笔的方法，包括如何加载图案、创建重复填充样式并应用于画笔，以及如何通过JavaScript控制画布上的绘制行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.先上图：

2.核心代码：

//<image src="./images/penStyle.ico" id="penStyle"></image> 自定义的一个图片var img=document.getElementById("penStyle");
var pat=ctx.createPattern(img,"repeat");
ctx.strokeStyle=pat;

3.笔刷原型：（丑陋的图片-笔刷）：

丑陋的图片-笔刷

4.全部代码：（☆☆☆：点击画笔，才会切换！！！）

<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 = "10" style="display: none;" /><!--拖动条--> 
    <input type="color" id="colorBtn">
    <button id="eraserBtn">橡皮擦</button>
    <button onclick="pic_cancel()">撤销</button>
</div>

<div style="display: none;" id = "size">
	 <image src="./images/penStyle.ico" id="penStyle"></image>
</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");
        ctx.lineJoin = 'round';
		ctx.lineCap = 'round';
		// ctx.shadowBlur=10;
		// ctx.shadowOffsetX=10;
		// ctx.shadowColor="black";

	
        //鼠标按下事件
        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);
            ctx.lineTo(ev.offsetX, ev.offsetY);
		    ctx.stroke();
		    [x, y] = [ev.offsetX, ev.offsetY];
            //鼠标移动
            canvas.onmousemove=function(ev){
                //求鼠标此时坐标
                var x=ev.offsetX;
                var y=ev.offsetY;
                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;
      		//var my_gradient=ctx.createLinearGradient(0,0,0,500);
		    // my_gradient.addColorStop(0,colorBtn.value);
		    // my_gradient.addColorStop(1,"white");
		    var img=document.getElementById("penStyle");
			var pat=ctx.createPattern(img,"repeat");
		    ctx.strokeStyle=pat;
            //document.body.style.cursor="url('./images/brush.ico'),auto";
            ctx.strokeStyle = `hsl(${pat}, 100%, 50%)`;
        }
        //设置为橡皮擦的函数
        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";
	    };
	    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>

5.附一张笔刷图片：