使用畫布繪製方形和三角形定製顏色，當點擊bottton

-2

<html> 
<head> 


</head> 
<body> 
    <canvas id="canvasId" width="300" height="300"></canvas> 
    <script> 
function square() { 

    var ctx = document.getElementById('canvasId').getContext('2d'); 
    var col= document.getElementById("clr"); 
     ctx.beginPath(); 
     ctx.rect(10, 10, 70, 70); 
     ctx.fillStyle = 'yellow'; 
     ctx.fill(); 
     ctx.lineWidth = 2; 
     ctx.strokeStyle = 'black'; 
     ctx.stroke(); 

} 
function triangle() { 

     var canvas = document.getElementById('canvasId'); 
     var context = canvas.getContext('2d'); 
     var col= document.getElementById("clr"); 
     context.beginPath(); 
     context.rect(85, 80, 200, 100); 
     context.fillStyle = 'yellow'; 
     context.fill(); 
     context.lineWidth = 2; 
     context.strokeStyle = 'black'; 
     context.stroke(); 

} 

    </script> 
    <p>Color <input type="color" id="clr" value="" /></p> 
    <input type="button" value="square" onclick="square()" /> 
    <input type="button" value="triangle" onclick="triangle()" /> 
</body> 
</html>

我對這個問題的一個問題，我想，當用戶選擇的顏色，點擊方形或三角形，它會與他/她選擇的顏色繪製它，我應該怎麼改變，並添加？

來源

2013-01-19 Johan

您需要用實際繪製三角形的東西替換第二個rect(...)調用，並且可以通過訪問其value屬性輕鬆地從輸入字段獲取顏色。

Click here for my fork of your jsFiddle.

相關的代碼行訪問的輸入值的位置：

var col= document.getElementById("clr"); 
ctx.fillStyle = col.value;

現在的三角圖形（假設你想要一個等腰三角形，以適應原始矩形）：

context.beginPath(); 
context.moveTo(85, 180); 
context.lineTo(185, 80); 
context.lineTo(285, 180); 
context.closePath();

來源

2013-01-19 21:32:22

我在http://jsfiddle.net/rcondori/3gmosgq7/

一個例子

這個例子是梯形...

function isInsideBox(x, y, x1, x2, y1, y2) { 
var a = getValueA(x1, x2, y1, y2); 
var b = getValueB(x1, y1, a); 
var auxY = (a * x) + b; 
if (auxY <= y) { 
    return true; 
} else { 
    return false; 
} 
} 
function getValueA(x1, x2, y1, y2) { 
return ((y1 - y2)/(x1 - x2)); 
} 
function getValueB(x1, y1, a) { 
return (y1 - (a * x1)); 
}

來源

2014-10-22 20:59:40 ron

哎羅恩，偉大的回答，請注意，任何人都有使用這種麻煩的錯誤：如果（Y> element.y1 &&ÿ element.x1 && X element.y1 &&ÿ<（elemTop + element.y3）&& X> element.x1 && X Alex7

使用畫布繪製方形和三角形定製顏色，當點擊bottton

回答

相關問題