我正在使用画布进行跟踪,但我需要出现在矩形后面的线条,并且每条线条都有自己的颜色
画布代码
<script>
//X,Y
function start () {
var element = document.querySelector('canvas')
element.width = window.innerWidth;
element.height = window.innerHeight;
var s1 = element.getContext("2d");
var s2 = element.getContext("2d");
var s3 = element.getContext("2d");
var s4 = element.getContext("2d");
s1.fillRect(110,110,100,100);
s2.fillRect(220,300,100,100);
s3.fillRect(400,200,100,100);
s4.fillRect(800,500,100,100);
s1.beginPath();
s1.moveTo(250,330);
s1.strokeStyle = "Gray";
s1.lineWidth = 3;
s1.lineTo(120,120);
s1.strokeStyle = "blue";
s1.lineTo(440,250);
s1.stroke();
s2.beginPath();
s2.lineWidth = 2;
s2.moveTo(850,550);
s2.strokeStyle = "green";
s2.lineTo(240,330);
s2.strokeStyle = "green";
s2.lineTo(450,250);
s2.stroke();
}
window.addEventListener("load",start, false);
</script>
有一个上下文属性允许您定义如何添加元素:
CanvasRenderingContext2D.globalCompositeOperation
通过指示
contexto.globalCompositeOperation='destination-over';
,您可以使新数字站在现有数字后面:我不太明白你的问题,为什么不先画矩形呢?它们是strokeStyle和fillStyle非常不同的东西,一个是线条的颜色,另一个是填充颜色,无论如何,如果你想保持strokeStyle的颜色,你可以使用save()和restore()函数。
使用 save() 和 restore() 的示例
在 CodePen 上查看Jesus Tepec ( @JesusTepec ) 的保存和恢复代码。密码笔