HTML5 Canvas支持手机端涂鸦画板下载特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5 Canvas支持手机端涂鸦画板下载特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>HTML5 Canvas支持手机端涂鸦画板下载</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="css/chalk.css">

</head>
<body>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/chalk.js"></script>
</body>
</html>

JS代码(chalk.js):

$(document).ready(chalkboard);
	function chalkboard(){
	$('#chalkboard').remove();
	$('.chalk').remove();
	$('body').prepend('<div class="panel"><a class="link" target="_blank">Save</a></div>');
	$('body').prepend('<img src="img/bg.png" id="pattern" width=50 height=50>');
	$('body').prepend('<canvas id="chalkboard"></canvas>');
	$('body').prepend('<div class="chalk"></div>');
	var canvas = document.getElementById("chalkboard");
	$('#chalkboard').css('width',$(window).width());
	$('#chalkboard').css('height',$(window).height());
	canvas.width = $(window).width();
	canvas.height = $(window).height();
	var ctx = canvas.getContext("2d");
	var width = canvas.width;
	var height = canvas.height;
	var mouseX = 0;
	var mouseY = 0;
	var mouseD = false;
	var eraser = false;
	var xLast = 0;
	var yLast = 0;
	var brushDiameter = 7;
	var eraserWidth = 50;
	var eraserHeight = 100;
	$('#chalkboard').css('cursor','none');
	document.onselectstart = function(){
	return false;
}
;
	ctx.fillStyle = 'rgba(255,255,255,0.5)';
	ctx.strokeStyle = 'rgba(255,255,255,0.5)';
	ctx.lineWidth = brushDiameter;
	ctx.lineCap = 'round';
	var patImg = document.getElementById('pattern');
	document.addEventListener('touchmove',function(evt){
	var touch = evt.touches[0];
	mouseX = touch.pageX;
	mouseY = touch.pageY;
	if (mouseY < height && mouseX < width){
	evt.preventDefault();
	$('.chalk').css('left',mouseX + 'px');
	$('.chalk').css('top',mouseY + 'px');
	//$('.chalk').css('display','none');
	if (mouseD){
	draw(mouseX,mouseY);
}
}
}
,false);
	document.addEventListener('touchstart',function(evt){
	//evt.preventDefault();
	var touch = evt.touches[0];
	mouseD = true;
	mouseX = touch.pageX;
	mouseY = touch.pageY;
	xLast = mouseX;
	yLast = mouseY;
	draw(mouseX + 1,mouseY + 1);
}
,false);
	document.addEventListener('touchend',function(evt){
	mouseD = false;
}
,false);
	$('#chalkboard').css('cursor','none');
	ctx.fillStyle = 'rgba(255,255,255,0.5)';
	ctx.strokeStyle = 'rgba(255,255,255,0.5)';
	ctx.lineWidth = brushDiameter;
	ctx.lineCap = 'round';
	$(document).mousemove(function(evt){
	mouseX = evt.pageX;
	mouseY = evt.pageY;
	if(mouseY<height && mouseX<width){
	$('.chalk').css('left',(mouseX-0.5*brushDiameter)+'px');
	$('.chalk').css('top',(mouseY-0.5*brushDiameter)+'px');
	if(mouseD){
	if(eraser){
	erase(mouseX,mouseY);
}
else{
	draw(mouseX,mouseY);
}
}
}
else{
	$('.chalk').css('top',height-10);
}
}
);
	$(document).mousedown(function(evt){
	mouseD = true;
	xLast = mouseX;
	yLast = mouseY;
	if(evt.button == 2){
	erase(mouseX,mouseY);
	eraser = true;
	$('.chalk').addClass('eraser');
}
else{
	if(!$('.panel').is(':hover')){
	draw(mouseX+1,mouseY+1);
}
}
}
);
	$(document).mouseup(function(evt){
	mouseD = false;
	if(evt.button == 2){
	eraser = false;
	$('.chalk').removeClass('eraser');
}
}
);
	$(document).keyup(function(evt){
	if(evt.keyCode == 32){
	ctx.clearRect(0,0,width,height);
	layPattern();
}
}
);
	$(document).keyup(function(evt){
	if(evt.keyCode == 83){
	changeLink();
}
}
);
	document.oncontextmenu = function(){
	return false;
}
;
	function draw(x,y){
	ctx.strokeStyle = 'rgba(255,255,255,'+(0.4+Math.random()*0.2)+')';
	ctx.beginPath();
	ctx.moveTo(xLast,yLast);
	ctx.lineTo(x,y);
	ctx.stroke();
	// Chalk Effectvar length = Math.round(Math.sqrt(Math.pow(x-xLast,2)+Math.pow(y-yLast,2))/(5/brushDiameter));
	var xUnit = (x-xLast)/length;
	var yUnit = (y-yLast)/length;
	for(var i=0;
	i<length;
	i++ ){
	var xCurrent = xLast+(i*xUnit);
	var yCurrent = yLast+(i*yUnit);
	var xRandom = xCurrent+(Math.random()-0.5)*brushDiameter*1.2;
	var yRandom = yCurrent+(Math.random()-0.5)*brushDiameter*1.2;
	ctx.clearRect( xRandom,yRandom,Math.random()*2+2,Math.random()+1);
}
xLast = x;
	yLast = y;
}
function erase(x,y){
	ctx.clearRect (x-0.5*eraserWidth,y-0.5*eraserHeight,eraserWidth,eraserHeight);
}
$('.link').click(function(evt){
	$('.download').remove();
	var imgCanvas = document.createElement('canvas');
	var imgCtx = imgCanvas.getContext("2d");
	var pattern = imgCtx.createPattern(patImg,'repeat');
	imgCanvas.width = width;
	imgCanvas.height = height;
	imgCtx.fillStyle = pattern;
	imgCtx.rect(0,0,width,height);
	imgCtx.fill();
	var layimage = new Image;
	layimage.src = canvas.toDataURL("image/png");
	setTimeout(function(){
	imgCtx.drawImage(layimage,0,0);
	var compimage = imgCanvas.toDataURL("image/png");
	//.replace('image/png','image/octet-stream');
	$('.panel').append('<a href="'+compimage+'" download="chalkboard.png" class="download">Download</a>');
	$('.download').click(function(){
	IEsave(compimage);
}
);
}
,500);
}
);
	function IEsave(ctximage){
	setTimeout(function(){
	var win = window.open();
	$(win.document.body).html('<img src="'+ctximage+'" name="chalkboard.png">');
}
,500);
}
$(window).resize(function(){
	chalkboard();
}
);
}

CSS代码(demo.css):

body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}

附件:下载该文件资源,减少时间成本(增值服务)