H5 Canvas毛笔刷画板特效代码下载


H5  Canvas毛笔刷画板特效代码下载
H5 Canvas毛笔刷画板特效代码下载以及Canvas、毛笔刷画板等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/brush.js"></script>

2. HTML代码

<div class="paper">
<canvas id="graffiti"></canvas>
</div>
<div class="brush">
<p>选择笔刷:</p>
<img src="img/pen2.png" class="active" id="pen2" alt="" onClick="selected(0)">
<img src="img/pen1.png" id="pen1" alt="" onClick="selected(1)">
<p onClick="clearPaper()" class="clear">清空</p>
</div>
<script type="text/javascript">
(function (global) {
	const config = {
		el: 'graffiti', //canvasID选择器
		width: 800, //canvas宽
		height: 400, //canvas高
		brushId: 0, //选择笔刷
	};
	const brush = new Brush(config);
	global.clearPaper = function () {
		window.console.log('清空');
		brush.clear();
	}
	//选择笔刷
	const brushNode = document.querySelectorAll('.brush>img'); //两个笔刷图片标签(数组)
	global.selected = function(index) {
		for(let i = 0; i < brushNode.length; i++){
			if(index === i){
				brushNode[i].setAttribute('class','active');
				//改变选择的笔刷
				brush.img = brushNode[i];
			}else {
				brushNode[i].setAttribute('class','');
			}
		}
	}
})(window);
//上述JS写法包含了闭包概念,有不懂的同学可以多看看闭包函数。
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章