HTML5 Canvas Writing/Painting初级-优快云博客

本文介绍了一个基于 HTML5 Canvas 实现的简单绘画工具，包括笔触颜色、大小选择，当前仅支持 PC 端操作。通过 JavaScript 编程实现了基本的绘图功能，并提供了多种颜色和尺寸选项，旨在提升用户在网页上的创意表达能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

通过HTML5 Canvas实现Writing/Paiting的功能，可选择笔触颜色、大小，目前只能在PC端运作，TOUCH功能后续增进；整体比较简单，不过还是学到不少东西。

如果大伙有其他的相关建议也可以提出哈，多谢！

var canvas;
var context;
var paint;
var canvasWidth = 800;
var canvasHeight = 420;
var lineWidth = 8;
var colorRed = "#d20000";
var colorGreen = "#1c8c1c";
var colorYellow = "#ffd200";
var colorBlue = "#1496ff";
var colorPink = "ff00b0";
var colorOrange = "ff6600";

function execute() {
	prepareCanvas();
}

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var clickColor = new Array();
var clickSize = new Array();
var curColor = colorRed;
var curSize = "normal";

function prepareCanvas()
{
	
	var canvasDiv = document.getElementById('canvasWriting');
	canvas = document.createElement('canvas');
	canvas.setAttribute('width', canvasWidth);
	canvas.setAttribute('height', canvasHeight);
	canvas.setAttribute('id', 'canvas');
	canvasDiv.appendChild(canvas);
	if(typeof G_vmlCanvasManager != 'undefined') {
		canvas = G_vmlCanvasManager.initElement(canvas);
	}
	context = canvas.getContext("2d");

	$('#canvas').mousedown(function(e)
	{
		// Mouse down location
		var mouseX = e.pageX - this.offsetLeft;
		var mouseY = e.pageY - this.offsetTop;
		
		paint = true;
		addClick(mouseX, mouseY, false);
		redraw();
	});
	
	$('#canvas').mousemove(function(e){
		if(paint){
			addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
			redraw();
		}
	});
	
	$('#canvas').mouseup(function(e){
		paint = false;
	  	redraw();
	});
	
	$('#canvas').mouseleave(function(e){
		paint = false;
	});
	
	$('#Red').mousedown(function(e){
		curColor = colorRed;
	});
	$('#Green').mousedown(function(e){
		curColor = colorGreen;
	});
	$('#Yellow').mousedown(function(e){
		curColor = colorYellow;
	});
	$('#Blue').mousedown(function(e){
		curColor = colorBlue;
	});	
	$('#Pink').mousedown(function(e) {
		curColor = colorPink;
	});
	$('#Orange').mousedown(function(e) {
		curColor = colorOrange;
	});
	$('#Small').mousedown(function(e){
		curSize = "small";
	});
	$('#Normal').mousedown(function(e){
		curSize = "normal";
	});
	$('#Large').mousedown(function(e){
		curSize = "large";
	});
	
	$('#clearCanvas').mousedown(function(e)
	{
		clickX = new Array();
		clickY = new Array();
		clickDrag = new Array();
		clickColor = new Array();
		clickSize = new Array();
		clearCanvas();
	});
}

function addClick(x, y, dragging)
{
	clickX.push(x);
	clickY.push(y);
	clickDrag.push(dragging);
	clickColor.push(curColor);
	clickSize.push(curSize);
}

function clearCanvas()
{
	context.fillStyle = '#fff'; // Work around for Chrome
	context.fillRect(0, 0, canvasWidth, canvasHeight); // Fill in the canvas with white
	canvas.width = canvas.width; // clears the canvas 
}

function redraw()
{
	clearCanvas();
	
	var radius;
	context.lineJoin = "round";
	
			
	for(var i=0; i < clickX.length; i++)
	{
		if(clickSize[i] == "small"){
			radius = 2;
		}else if(clickSize[i] == "normal"){
			radius = 5;
		}else if(clickSize[i] == "large"){
			radius = 10;
		}
	
		context.beginPath();
		if(clickDrag[i] && i){
			context.moveTo(clickX[i-1], clickY[i-1]);
		}else{
			context.moveTo(clickX[i]-1, clickY[i]);
		}
		context.lineTo(clickX[i], clickY[i]);
		context.closePath();
		context.strokeStyle = clickColor[i];
		context.lineWidth = radius;
		context.stroke();
	}
}

execute();

转载于:https://my.oschina.net/xiaopenglu/blog/85975