今天工作闲来无视于是去了知网看看html5canvas相关的,看到个理论，于是我就动手来敲一遍，发现有些错误的地方，自己进行更正， 该自定义画布的主要功能是可以通过鼠标进行绘画,具有设置线条颜色和粗细功能,当按下鼠标时开始绘画,当松开鼠标时结束绘画，可使用橡皮擦擦除画出的线条功能。
首先创建一条画布
<-- 然后给这条画布加个背景 -->
<style>
#mycanvas{
/* width:600px; css不要这样设置宽和高会导致xy坐标不正确
height: 600px; */
background-color: black;
}
</style>
<body>
<canvas id="mycanvas"> </canvas>
<div style="width: 600px;height: 60rpx;">
<div onclick="changeTool(1)">画笔1</div>
<div onclick="changeTool(2)">画笔2</div>
<div onclick="changeTool(3)">橡皮擦</div>
</div>
</body>
接下来是js的实现,有详细的注释哦
// 为了判断鼠标是否处于按下状态,这里需要定义按下标记的变量,初始的按下状态为false,鼠标的初始坐标分别为0。
var onoff = false;
var old_x = 0;
var old_y = 0;
// 线条的颜色
var lineColor = "#fff";
// 画笔的默认宽度
var lineW = 2;
// 当前选中的工具
var current_tool = 1;
// 通过JavaSript获得canvas标签的控制权,并创建一个绘制二维图形的drm对象。
var myCanvas = document.getElementById("mycanvas");
var drm = myCanvas.getContext("2d");
// 设置画布的大小
myCanvas.width = 600;
myCanvas.height = 600;
/** 接下来,将创建鼠标的监听事件,来判断当前鼠标的状态。
在绘画过程中,鼠标的状态变化过程是这样的:按下—移动-移动到画板外—松开,
所以需要对画板建立4个鼠标状态的监听事件,分别是mousedown、mousemove、mouseout、mouseup **/
myCanvas.addEventListener("mousedown", mousedown, false);
myCanvas.addEventListener("mousemove", doDraw, true);
myCanvas.addEventListener("mouseup", mouseup, false);
myCanvas.addEventListener("mouseout", mouseout, false);
// 鼠标移出当前画布重置坐标位置与关闭工具的操作
function mouseout(event) {
onoff = false;
old_x = 0;
old_y = 0;
}
// 鼠标按下记下其实的坐标并打开工具功能
function mousedown(event) {
onoff = true;
old_x = event.offsetX;
old_y = event.offsetY;
}
// 鼠标弹起重置坐标位置与关闭工具的操作
function mouseup(event) {
onoff = false;
old_x = 0;
old_y = 0;
}
//改变当前使用的工具
function changeTool(tool) {
switch (tool) {
case 1:
current_tool = 1;
lineColor = "#fff";
lineW = 2;
break;
case 2:
current_tool = 2;
lineColor = "red";
lineW = 3;
break;
case 3:
current_tool = 3;
break;
}
}
// 鼠标移动的事件
function doDraw(event) {
// 记录当前移动的位置
var new_x = event.offsetX;
var new_y = event.offsetY;
// 打开工具的操作功能
if (onoff == true) {
// current_tool 1:白画笔 2：红色画笔 3:橡皮擦
if (current_tool === 1 || current_tool === 2) {
drm.beginPath(); //起始一条路径，或重置当前路径
drm.moveTo(old_x, old_y); //把路径移动到画布中的指定点，不创建线条
drm.lineTo(new_x, new_y); //添加一个新点，然后在画布中创建从该点到最后指定点的线条
drm.strokeStyle = lineColor; //设置或返回用于笔触的颜色、渐变或模式
drm.lineWidth = lineW; //设置或返回当前的线条宽度
drm.lineCap = "round"; //设置或返回线条的结束端点样式
drm.stroke(); //绘制已定义的路径
} else if (current_tool === 3) {
// 定义：clearRect() 方法清空给定矩形内的指定像素，用法： context.clearRect(x,y,width,height);
drm.clearRect(old_x, new_y, 10, 10);
} else {
}
old_x = new_x;
old_y = new_y;
}
}
