HTML5 canvas javascript
你的选择
我有透明模式的笔刷，在顶部绘制时需要像这样更暗： 
现在在顶部绘画时，我得到的颜色是这样的： 
var el = document.getElementById('c');
var ctx = el.getContext('2d');
ctx.lineWidth = 10;
ctx.lineJoin = ctx.lineCap = 'round';
ctx.globalAlpha = "0.2";
ctx.strokeStyle = "red";
var isDrawing, points = [ ];
el.onmousedown = function(e) {
isDrawing = true;
points.push({ x: e.clientX, y: e.clientY });
};
el.onmousemove = function(e) {
if (!isDrawing) return;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
points.push({ x: e.clientX, y: e.clientY });
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (var i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.stroke();
};
el.onmouseup = function() {
isDrawing = false;
points.length = 0;
};canvas { border: 1px solid #ccc }<canvas id="c" width="500" height="300"></canvas> 残酷的腊肠犬
折线本身不能带有alpha绘制。因此，为了使您的线图代码与alpha配合使用，我将您的poyline图分为几个分段图。
for (var i = 1; i < points.length; i++)
{
ctx.beginPath();
ctx.moveTo(points[i-1].x, points[i-1].y);
ctx.lineTo(points[i].x, points[i].y);
ctx.stroke();
}
实际操作中：jsfiddle
当心，此代码无法执行。为了获得有效的代码，需要进行批处理。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
HTML5 canvas javascript
- 2
Javascript和HTML5 Canvas Sprite
- 3
HTML5 canvas + JavaScript class =错误
- 4
html5 canvas和javascript的奇怪行为
- 5
如何使用JavaScript在HTML5 Canvas中绘制圆？
- 6
HTML5 / Javascript Canvas邮票设计项目
- 7
使用JavaScript克隆并单击移动的HTML5 Canvas元素
- 8
在HTML5 canvas中，translate（）和moveTo（）JavaScript函数之间有什么区别？
- 9
Javascript HTML5 Canvas Mario Bros NES克隆，碰撞和跳跃中断
- 10
html5 canvas应用程序中的JavaScript base64图像源内存管理
- 11
How can I animate an image to spin inside an HTML5 canvas with JavaScript?
- 12
使用JavaScript添加到正文时，HTML5 Canvas会重置
- 13
使用HTML5 canvas和Javascript显示多帧dicom图像
- 14
HTML5：通过JavaScript绘制后将透明度应用于Canvas
- 15
使用JavaScript三角函数缩放旋转的图像以填充HTML5 Canvas？
- 16
将HTML5 Canvas + Javascript应用程序转换为可执行文件
- 17
如何在javascript中获取HTML5 Canvas.todataurl文件大小？
- 18
HTML5 Canvas不会在Rails中使用JavaScript进行迭代
- 19
Javascript，Html5 Canvas渲染一次后，对其进行更新
- 20
裁剪HTML5 Canvas / JavaScript后，如何从图像中删除透明空白？
- 21
HTML5 Canvas文字交集
- 22
如何清除canvas html5？
- 23
HTML5 Canvas游戏渲染图
- 24
从html5 <canvas>创建视频流
- 25
HTML5 Canvas drawImage问题
- 26
HTML5 Canvas-fillRect（）与rect（）
- 27
语音气泡html5 canvas js
- 28
HTML5 Canvas：直接移至点
- 29
HTML5 canvas hittest任意形状
我来说两句