Canvas 单击底部时使用自定义颜色的画布绘制正方形和三角形_Canvas_Html5 Canvas

Canvas 单击底部时使用自定义颜色的画布绘制正方形和三角形

canvas html5-canvas

Canvas 单击底部时使用自定义颜色的画布绘制正方形和三角形,canvas,html5-canvas,Canvas,Html5 Canvas,我有以下代码： <html> <head> </head> <body> <canvas id="canvasId" width="300" height="300"></canvas> <script> function square() { var ctx = document.getElementById('canvasId').getContext('2d'); var

我有以下代码：

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


函数平方（）{
var ctx=document.getElementById（'canvasId'）.getContext（'2d'）；
var col=document.getElementById（“clr”）；
ctx.beginPath（）；
ctx.rect（10,10,70,70）；
ctx.fillStyle='黄色'；
ctx.fill（）；
ctx.lineWidth=2；
ctx.strokeStyle=‘黑色’；
ctx.stroke（）；
}
函数三角形（）{
var canvas=document.getElementById（'canvasId'）；
var context=canvas.getContext（'2d'）；
var col=document.getElementById（“clr”）；
context.beginPath（）；
rect（85,80,200,100）；
context.fillStyle='yellow'；
context.fill（）；
context.lineWidth=2；
context.strokeStyle='black'；
stroke（）；
}
颜色

我在这个问题上有一个问题，我想当用户选择颜色并单击正方形或三角形时，它将使用他/她选择的颜色绘制，我应该更改和添加什么？

您需要将第二个

rect（…）

调用替换为实际绘制三角形的调用，通过访问输入字段的

值

属性，可以很容易地从输入字段中获取颜色

用于访问输入值的相关行如下所示：

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

现在开始绘制三角形（假设需要等腰三角形来拟合原始矩形）：

我在这方面有一个例子

此示例适用于梯形

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));
}

函数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 hey ron，回答得很好，请注意任何使用此选项有困难的人都会遇到一个错误：if（y>element.y1&&yelement.x1&&xelement.y1&&y<（elementtop+element.y3）&&x>element.x1&&xfunction 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));
}