javascript - 动态地在 Canvas 元素上绘图

Question

我正在尝试学习一些新东西，并想尝试一下 Canvas 。 我有一个 Canvas 元素，可以在单击 anchor 后加载我想要绘制的图像。

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

它的目的是在 Canvas 先前加载的图像顶部绘制一个红色三 Angular 形。 不幸的是我对此一无所获。

任何帮助将不胜感激。

Answer 1

显然您正在使用“$”函数，您可能期望 JQuery 提供该函数，但您没有在文件中包含 JQuery 脚本。

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

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

顺便说一句，您正在绘制的三 Angular 形实际上是绿色的。如果你希望它是红色的，你可以设置

c2.fillStyle = '#ff0000';