html5 canvas 画笔透明的实现方法

<!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>

html5 canvas 画笔透明的实现方法相关推荐

html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法
使用HTML5 canvas绘制一个矩形的方法发布时间:2020-08-29 11:23:12 来源:亿速云阅读:102 作者:小新这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一 ...
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
html 圆圈透明其他不透明,Javascript HTML5 Canvas绘制透明圆圈
我需要有一个函数在画布上绘制几个圆圈,从mousedown at center = x,y开始,并将鼠标拖动到deltaX,deltaY,从而为每个圆圈创建半径r.圆圈无法填充(需要它们透明),因此用 ...
clear html5代码,用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
在现实世界中,我们使用画笔在画板上进行绘画:在html5 canvas中,我们同样可以使用canvas的画笔--CanvasRenderingContext2D对象在canvas上进行绘画.众所周知, ...
提高HTML5 canvas性能的几种方法
简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2D immediate mode graphic)的标准.许多开发者现在 ...
提高HTML5 canvas性能的几种方法！
http://blog.csdn.net/zyz511919766/article/details/7401792 简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为 ...
HTML5 canvas 计算文字宽度的方法（measureText）
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font= ...
html页面涂鸦,HTML5 | Canvas画笔小应用（涂鸦板）
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 const canvas = document.querySelector('#draw'); const ...
html5使用阴影,HTML5 Canvas阴影用法演示
HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = "red" 表示设置阴影颜色为红色 ...

html5 canvas 画笔透明的实现方法

html5 canvas 画笔透明的实现方法相关推荐

最新文章

热门文章