canvas画笔自定义笔触

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.附一张笔刷图片：

canvas画笔自定义笔触相关推荐

Canvas画笔的基本使用
文章目录 Canvas画笔的基本使用图形绘制设置样式画笔实例练习渐变色绘制镂空的房子绘制坐标网格绘制坐标系绘制坐标点绘制折线图参考文档 Canvas画笔的基本使用图形绘制需要理 ...
Canvas实现自定义时钟
实现效果除了皮卡丘背景外的刻度线,时针分针秒针均是使用Canvas绘制出来的. 实现过程设置基本大小及背景 1. 皮卡丘全脸素材 2. 基本结构设置HTML结构如下: <div class ...
php网页自定义头像系统,怎样用canvas实现自定义头像功能
这次给大家带来怎样用canvas实现自定义头像功能,用canvas实现自定义头像功能的注意事项有哪些,下面就是实战案例,一起来看一下. 写在最前: 前两天老大跟我说老虎官网上那个自定义头像的功能是fl ...
【Android开发基础】Canvas画笔（以刮刮乐为例）
文章目录一.引言二.设计 1.获取图片资源 2.获取屏幕信息 3.Canvas涂层 4.随机内容 5.屏幕监听三.附件 1.UI设计 2.总代码 (1)控件初始化 (2)图层初始化 3.源代码 ...
android地图路径绘制,android：利用svg的path路径+canvas 开发自定义地图控件
需求:做小型地图的一个显示功能实现思路:自定义view解析对应的svg文件,在利用canvas的画笔画出相应的地图线条.各个线条围成的区域可以表示成各个元素比如树,街道,路灯,汽车等等一切事物.然后 ...
Android之Canvas画笔和画布
久违的Canvas画布,终于学到这里了,学完以后附上博文一篇以便日后记不住. 目录一.Canvas(画布) 二.Paint(画笔) 三.实例涉及的相关知识点 1.绘制安卓机器人 2.绘制文本 3. ...
Canvas实现自定义图片大小（Vue）
实现思路: 1.把上传图片利用FileReader的方法转为一个base64字节码 2.使用Image对象来把base64字节码加载为一个图片 3.使用canvas把Image图片画出来,在画的时候可 ...
记canvas画笔笔迹的多次优化过程
我们的项目是面向学校老师的教学软件,所以肯定少不了互动白板的功能,而这个里面的画笔功能是由我来开发的,下面介绍这个过程中遇到的问题以及解决方法. 首先给大家明确下由于软件中的画布可以自由移动,会超出屏 ...
头像 HTML5 JSON PHP 摄像头,canvas之自定义头像功能实现代码示例
写在最前: 前两天老大跟我说老虎官网上那个自定义头像的功能是flash实现的,没有安装过的还得手动去"允许"falsh的运行.所以让我用canvas实现一个一样的功能,嘿嘿,刚好最 ...

canvas画笔自定义笔触

canvas画笔自定义笔触相关推荐

最新文章

热门文章