Javascript 在画布元素上动态绘制

我正在尝试学习一些新的东西，我想我尝试一下画布。 我得到了一个canvas元素，它加载了一个我想在单击锚点后绘制的图像

HTML

它所要做的就是在画布先前加载的图像顶部绘制一个红色三角形。 不幸的是，我没有取得任何进展

---

任何帮助都将不胜感激。

显然您正在使用“$”函数，这可能是您对JQuery的期望，但您的文件中没有包含JQuery脚本

除此之外，您的代码似乎工作正常

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

c2.fillStyle='#ff0000'

---

这对我有用，@fordcars链接不起作用，伙计。呸，试试这个：是的，它起作用了，现在看起来很像我的代码。由于某些原因，jquery出现错误。更改了版本，boom成功了。是的，我复制了后来修改的代码gence green:）。是的，我已经运行了jquery。我更改了jquery版本，现在它可以工作了（在一定程度上），但现在我遇到了另一个问题，图像在画布中拉伸，而不是调整大小。仍在调查中

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

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