html5画布用鼠标控制,使用鼠标在HTML5 Canvas上绘图-CSDN博客

这篇博客介绍了一个使用JavaScript实现的交互式绘图应用。通过监听canvas元素的鼠标事件，实现了画线、选择颜色和擦除等功能。用户可以在画布上自由绘制，并可以选择不同的颜色进行填充。此外，还提供了清除画布和保存图片的功能。

摘要由CSDN通过智能技术生成

这是一个工作样本。

var canvas, ctx, flag = false,

prevX = 0,

currX = 0,

prevY = 0,

currY = 0,

dot_flag = false;

var x = "black",

y = 2;

function init() {

canvas = document.getElementById('can');

ctx = canvas.getContext("2d");

w = canvas.width;

h = canvas.height;

canvas.addEventListener("mousemove", function (e) {

findxy('move', e)

}, false);

canvas.addEventListener("mousedown", function (e) {

findxy('down', e)

}, false);

canvas.addEventListener("mouseup", function (e) {

findxy('up', e)

}, false);

canvas.addEventListener("mouseout", function (e) {

findxy('out', e)

}, false);

}

function color(obj) {

switch (obj.id) {

case "green":

x = "green";

break;

case "blue":

x = "blue";

break;

case "red":

x = "red";

break;

case "yellow":

x = "yellow";

break;

case "orange":

x = "orange";

break;

case "black":

x = "black";

break;

case "white":

x = "white";

break;

}

if (x == "white") y = 14;

else y = 2;

}

function draw() {

ctx.beginPath();

ctx.moveTo(prevX, prevY);

ctx.lineTo(currX, currY);

ctx.strokeStyle = x;

ctx.lineWidth = y;

ctx.stroke();

ctx.closePath();

}

function erase() {

var m = confirm("Want to clear");

if (m) {

ctx.clearRect(0, 0, w, h);

document.getElementById("canvasimg").style.display = "none";

}

function save() {

document.getElementById("canvasimg").style.border = "2px solid";

var dataURL = canvas.toDataURL();

document.getElementById("canvasimg").src = dataURL;

document.getElementById("canvasimg").style.display = "inline";

}

function findxy(res, e) {

if (res == 'down') {

prevX = currX;

prevY = currY;

currX = e.clientX - canvas.offsetLeft;

currY = e.clientY - canvas.offsetTop;

flag = true;

dot_flag = true;

if (dot_flag) {

ctx.beginPath();

ctx.fillStyle = x;

ctx.fillRect(currX, currY, 2, 2);

ctx.closePath();

dot_flag = false;

}

if (res == 'up' || res == "out") {

flag = false;

}

if (res == 'move') {

if (flag) {

prevX = currX;

prevY = currY;

currX = e.clientX - canvas.offsetLeft;

currY = e.clientY - canvas.offsetTop;

draw();

}

Choose Color

Eraser