html5 canvas 画笔透明的实现方法(转)

最新推荐文章于 2025-03-30 09:43:42 发布

dragoo1

最新推荐文章于 2025-03-30 09:43:42 发布

阅读量3.3k

点赞数

分类专栏： html html5 文章标签： canvas 透明涂鸦画图 html

html 同时被 2 个专栏收录

29 篇文章

订阅专栏

html5

17 篇文章

订阅专栏

本文提供了一个HTML5画板的实现示例，利用两个canvas元素叠加的方式实现了绘画功能。其中一个canvas负责绘制背景，另一个则负责捕捉鼠标点击并绘制线条。通过调整样式属性如颜色、透明度等，实现了较为丰富的绘图效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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.onmousedown=function(ev){
var ev=ev || event;	
cntx2.beginPath()
cntx2.moveTo(ev.clientX-canvas2.offsetLeft,ev.clientY-canvas2.offsetTop);	
fou=true;
}
 
 
canvas2.onmousemove=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.onmouseup=function(){
cntx.drawImage(canvas2,0,0);
cntx2.clearRect(0,0,canvas.width,canvas.height);
fou=false;
}
 
canvas2.onmouseout=function(){
cntx.drawImage(canvas2,0,0);
cntx2.clearRect(0,0,canvas.width,canvas.height);
fou=false;
}
</script>
</body>
</html>

转自：https://blog.csdn.net/n994298535/article/details/52832576