网页画画js插件_JavaScript实现在网页上画画 (bootstrapmb.com)（不要开通会员，通过开发者可以下载）

HTML Canvas 参考手册 (w3school.com.cn)

JS实现canvas把HTML保存成图片并下载到本地 - 简书 (jianshu.com)

示例代码：

//保存提交
Sketchpad.prototype.save = function() {
var canvas = document.getElementById("sketchpad");
    if (window.navigator.msSaveOrOpenBlob) {//ie浏览器
      var imgData = canvas.msToBlob();
      var blobObj = new Blob([imgData]);
    } else {//谷歌火狐浏览器
document.getElementById("back").style.background="url("+canvas.toDataURL('image/png')+")"
document.getElementById("back").style.backgroundPosition='center';
document.getElementById("back").style.backgroundRepeat= 'no-repeat';
document.getElementById("back").style.backgroundSize='contain';
   //console.log(canvas.toDataURL("image/png"))

    }
}
//保存提交

如何将Canvas绘制过程转为视频_capturestream_油墨香^_^的博客-CSDN博客

Canvas清除画布clearRect非常容易踩坑的点_canvas clearrect_金色浪花的博客-CSDN博客

添加了画笔透明颜色，橡皮擦需要用另一个API函数

这个颜色和canvas没关系，只是通过固有的颜色#000000十六进制，添加了后面两位的透明位数，需要type="range"min="0" max="255",step="1",但在十进制转换十六进制时例如：0,1,2,3，少一位00,01,02,03...需要不全，引用了下面的函数

function prefixZero(n,m){var _a = (Array(m).join(0) + n).slice(-m);return _a;}
prefixZero(j,2)

js简单实现数字位数不够前面补0的方法代码

原文：js简单实现数字位数不够前面补0的方法代码 (tddx.net)

javascript怎么将数字转为Hex（16进制）-js教程-PHP中文网

16进制颜色码对照表_旧城以西^的博客-CSDN博客_16进制颜色

将一位的十六进制转换成两位，然后添加给固有色后端。

具体如下：

html:

js:

$(document).ready(function () {//这是页面初始化函数里面
$('#alpha-picker').change(alphacolor);$('#alpha-picker').val('255');
}

这是透明的核心

function color(event){sketchpad.color =$(event.target).val()+alpha(event);console.log(sketchpad.color)}
//透明度，是将透明度转成16位然后不足两位补0，做成函数alpha(event),再在change事件中调取这个绑定的函数
function alpha(event) {function prefixZero(n,m){var _a = (Array(m).join(0) + n).slice(-m);return _a;}
var s=parseInt($('#alpha-picker').val());var j=s.toString(16); j=prefixZero(j,2);return j;}
function alphacolor(event){sketchpad.color =$('#color-picker').val()+alpha(event);}
//这个alpha change事件监听的，重新取画笔的值，然后重新组合。
//透明度，是将透明度转成16位然后不足两位补0，做成函数alpha(event),再在change事件中调取这个绑定的函数

总结：主要是要注意function xxx()构造函数的用法，和change()监听事件的用法，在构思一些逻辑关系就可以实现。

实现橡皮擦功能

使用了canvas 合成属性globalCompositeOperation

然后做一个画笔和橡皮切换的按钮，这样画笔就可以实现橡皮擦的功能了。

综合DEMO