[英]Rectangles on canvas
我希望能夠根據所做的選擇更改對象的顏色。 我的畫布上有3個矩形(假設矩形分別是a,b和c),如何更改單擊的矩形的顏色?
例如:如果單擊“ b”,然后選擇橙色,則只有B會將顏色更改為橙色。
<a class="button" style="background-color: #000;" onClick="clur1()"></a>
<a class="button" style="background-color: #FF6600;" onClick="clur2()"></a>
<a class="button" style="background-color: #00C4FF;" onClick="clur3()"></a>
<p id="clurN">Empty</p>
<canvas id="myCanvas" width="200" height="100" style="background-color: #C4C4C4;">
<script>
function Shape(x, y, w, h, fill) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.fill = fill;
}
var elem = document.getElementById('myCanvas');
if (elem.getContext) {
var myRect = [];
myRect.push(new Shape(10, 0, 25, 25, "#333"));
myRect.push(new Shape(0, 40, 39, 25, "#333"));
myRect.push(new Shape(0, 80, 100, 25, "#333"));
context = elem.getContext('2d');
for (var i in myRect) {
oRec = myRect[i];
context.fillStyle = oRec.fill;
context.fillRect(oRec.x, oRec.y, oRec.w, oRec.h);
}
}
function clur1() {
//Store the element in the variable:
var paragraph = document.getElementById("clurN");
//change the element's inner HTML:
paragraph.innerHTML = "Done!!";
var c=document.getElementById("c1Canvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
}
</script>
</canvas>
您可以偵聽mousedown事件。
當用戶單擊“ test”(測試)時,鼠標是否位於您的直腸內,如下所示:
function handleMouseDown(e){
e.preventDefault();
var x=parseInt(e.clientX-offsetX);
var y=parseInt(e.clientY-offsetY);
// iterate every rect and recolor any that are under x/y
for(var i=0;i<myRect.length;i++){
var oRec=myRect[i];
if(x>=oRec.x && x<=oRec.x+oRec.w && y>=oRec.y && y<=oRec.y+oRec.h){
oRec.fill=currentColor;
// drawRect will redraw the specified rectangle
drawRect(oRec);
}
}
}
演示: http : //jsfiddle.net/m1erickson/48BMC/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.