html5 canvas 画笔透明的实现方法

最新推荐文章于 2024-05-17 16:33:04 发布

狄大人的打火机

最新推荐文章于 2024-05-17 16:33:04 发布

阅读量3.3k

点赞数

本文链接：https://blog.csdn.net/n994298535/article/details/52832576

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5简单的画图</title>
<style>
	*{margin: 0; padding: 0;}
canvas{ border:1px solid #000;position: absolute; top:0; left:0;}
</style>
</head>

<body>
<canvas id="myCanvas" width="1000" height="550"></canvas>

<canvas id="myCanvas2" width="1000" height="550"></canvas>
<script>
var fou=false;
	
var canvas=document.getElementById("myCanvas");
var cntx=canvas.getContext("2d");

var canvas2=document.getElementById("myCanvas2");
var cntx2=canvas2.getContext("2d");
    //cntx2.globalAlpha=0.3;
	cntx2.strokeStyle = "rgba(255,0,0,0.3)";
	cntx2.lineWidth = "20";
	cntx2.lineCap="round";
	cntx2.lineJoin="round";	
	
canvas2.οnmοusedοwn=function(ev){
var ev=ev || event;	
cntx2.beginPath()
cntx2.moveTo(ev.clientX-canvas2.offsetLeft,ev.clientY-canvas2.offsetTop);	
fou=true;
}


canvas2.οnmοusemοve=function(ev){
	if(fou){
var ev=ev || event;
cntx2.lineTo(ev.clientX-canvas2.offsetLeft,ev.clientY-canvas2.offsetTop);
cntx2.clearRect(0,0,canvas2.width,canvas2.height);
cntx2.stroke();
		
}}

canvas2.οnmοuseup=function(){
cntx.drawImage(canvas2,0,0);
cntx2.clearRect(0,0,canvas.width,canvas.height);
fou=false;
}

canvas2.οnmοuseοut=function(){
cntx.drawImage(canvas2,0,0);
cntx2.clearRect(0,0,canvas.width,canvas.height);
fou=false;
}
</script>
</body>
</html>

狄大人的打火机

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5 canvas 画笔透明的实现方法

HTML5简单的画图 *{margin: 0; padding: 0;}canvas{ border:1px solid #000;position: absolute; top:0; left:0;}var fou=false; var canvas=document.getElementById("myCanvas");var cntx=canvas.getCon
复制链接

扫一扫