尝试在画布中单击鼠标以添加图像

Trying to get a mouseclick in canvas to add an Image

本文关键字：鼠标 添加 图像 单击 布中      更新时间：2023-09-26

老师要求我们创建一个具有一些快速交互功能的 Canvas（该类是交互式 101。去图）所以我决定用我最喜欢的运动队蒙特利尔加拿大人来创建一个快速的想法。我将把 HTML 和 JavaScript 分开。

HTML（命名： MontrealSymbol.html）：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h1>Say Hello To...</h1>
    <h2>The MONTREAL CANADIENS!</h2>
    <canvas id="mCanvas" width="320" height="240">
        <p>Sorry, The Canvas element is not supported in this browser :(</p> 
    </canvas>
    <!-- Don't load/run Javascript until Canvas has loaded -->
    <script src="MontrealSymbol.js">
</script>      
<br/>
<button type="button" onclick="mSymbol()">Draw the Symbol of the Greats!</button>
<button type="button" onclick="clearBoard()">Clear The Board</button>
</body>
</html>

JavaScript（命名：MontrealSymbol.js）：

//test to see if we're connected.
console.log("Javascript Initialized");
//1. set up the canvas as an object with 2D context
var canvas = document.getElementById("mCanvas");
var context = canvas.getContext("2d");
//2. setting up font for later use
context.font = '24pt Verdana';
//Red Background
context.fillStyle = "#eb1919";
context.fillRect(0, 0, 320, 240);
//---------------X, Y---W, H
//White bar
context.fillStyle = "white";
context.fillRect(0, 75, 320, 85);
//Blue Bar
context.fillStyle = "blue";
context.fillRect(0, 80, 320, 75);
//border
context.fillStyle = "black";
context.fillRect(0, 0, 320, 5);
context.fillStyle = "black";
context.fillRect(0, 0, 3, 240);
context.fillStyle = "black";
context.fillRect(0, 235, 320, 5);
context.fillStyle = "black";
context.fillRect(317, 0, 3, 240);
function mSymbol(){
console.log("Drawing Montreal Canadiens Symbol");
base_image = new Image();
base_image.src = 'images/mCanadiens3.jpg';
base_image.onload = function(){
context.drawImage(base_image, 75, 62);}
}
function clearBoard(){
console.log("Clearing the Board");
context.clearRect(0, 0, 640, 480);
drawBack();
}
function drawBack(){
//Background
context.fillStyle = "#eb1919";
context.fillRect(0, 0, 320, 240);
//---------------X, Y---W, H
//layer one
context.fillStyle = "white";
context.fillRect(0, 75, 320, 85);
//layer two
context.fillStyle = "blue";
context.fillRect(0, 80, 320, 75);
//border
context.fillStyle = "black";
context.fillRect(0, 0, 320, 5);
context.fillStyle = "black";
context.fillRect(0, 0, 3, 240);
context.fillStyle = "black";
context.fillRect(0, 235, 320, 5);
context.fillStyle = "black";
context.fillRect(317, 0, 3, 240);
}
context.beginPath();
context.arc(20, 20, 10, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '111';
context.stroke();

这运行良好。很抱歉，我没有尝试用于执行鼠标事件的代码。我使用了几个不同人的想法，但似乎没有任何效果。我只是不断收到错误。我可能忘记了什么。但是，如果有人能想出一个快速的解决方案，我想要的是一个鼠标单击事件，该事件在单击时绘制JavaScript的最后7行，并且在按住鼠标时不会重复。

HTML：

<canvas id="mCanvas" width="320" height="240" onclick="canvasClick()">
    <p>Sorry, The Canvas element is not supported in this browser :(</p> 
</canvas>

JavaScript：

var canvas = document.getElementById("mCanvas");
var context = canvas.getContext("2d");
function canvasClick(){
    context.beginPath();
    context.arc(20, 20, 10, 0, 2 * Math.PI, false);
    context.fillStyle = 'black';
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = '111';
    context.stroke();
}
相关文章：