Question

我正在尝试学习一些新东西，并认为我尝试了一下画布。我有一个画布元素，一旦我点击一个锚点就会加载我想要绘制的图像。

HTML

<a href="javascript:" id="testClick">Click Me</a>
<canvas id="test" width=400 height=400></canvas>

的Javascript

var c = document.getElementById("test");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);  
};
img.src = 'http://lorempixel.com/400/400/abstract';

$("#test").on('click', function() {
    var c2 = document.getElementById('test').getContext('2d');
  c2.fillStyle = '#76ff03';
  c2.beginPath();
  c2.lineTo(100, 50);
  c2.lineTo(50, 100);
  c2.lineTo(0, 90);
  c2.closePath();
  c2.fill();
});

它所要做的就是在画布先前加载的图像上绘制一个红色三角形。不幸的是，我无法随心所欲。

任何帮助将不胜感激。

Answer 1

显然你正在使用“$”函数，你可能期望它来自JQuery，但是你没有在你的文件中包含JQuery脚本。

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

除此之外，您的代码似乎正常运行。

顺便说一句，你画的三角形实际上是绿色的。如果你想要它是红色的，你可以设置

c2.fillStyle ='＃ff0000';

动态绘制画布元素

1 个答案: