canvas小创作 之 实现一个画板（功能：画笔颜色粗细可以任选；橡皮擦功能和清空画板功能）
Posted 孤寒者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas小创作 之 实现一个画板（功能：画笔颜色粗细可以任选；橡皮擦功能和清空画板功能）相关的知识，希望对你有一定的参考价值。
实现效果：
canvas实现画板
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画板</title>
<style type="text/css">
#c
border: 1px solid yellowgreen;
span
/* 转行内块状标签*/
display: inline-block;
width: 30px;
height: 30px;
#cl1
background-color: red;
#cl2
background-color: green;
#cl3
background-color: yellow;
#cl4
background-color: gold;
</style>
</head>
<body>
<canvas id="c" width="600" height="400"></canvas>
<ul>
<li>
<p>画笔颜色</p>
<span id="cl1"></span>
<span id="cl2"></span>
<span id="cl3"></span>
<span id="cl4"></span>
</li>
<li>
<p>画笔粗细</p>
<button id="btn1" type="button">变粗</button>
<button id="btn2" type="button">变细</button>
</li>
<li>
<p>操作</p>
<button id="btn3" type="button">橡皮擦</button>
<button id="btn4" type="button">清空画板</button>
</li>
</ul>
</body>
<script type="text/javascript">
var c = document.getElementById("c");
var ctx = c.getContext("2d");
// 画笔颜色
var color = "cyan";
// 红
var red = document.getElementById("cl1");
red.onclick = function()
color = "red";
// 绿
var green = document.getElementById("cl2");
green.onclick = function()
color = "green";
// 黄
var yellow = document.getElementById("cl3");
yellow.onclick = function()
color = "yellow";
// 金黄
var gold = document.getElementById("cl4");
gold.onclick = function()
color = "gold";
// 线条粗细
var numberWidth = 3;
// 变粗
var changeBig = document.getElementById("btn1");
changeBig.onclick = function()
numberWidth+=3;
// 变细
var changeSmall = document.getElementById("btn2");
changeSmall.onclick = function()
numberWidth-=3;
if(numberWidth === 3)
numberWidth = 3;
// 橡皮擦功能
function clear(e2)
c.onmousemove = function(e)
// 使用方法.clearRect()清除以鼠标点击处为重心周围20*20的区域
var w = 20;
var h = 20;
var x = e.pageX - c.offsetLeft - w/2;
var y = e.pageY - c.offsetTop - h/2;
ctx.clearRect(x,y,w,h);
// 橡皮擦
var eraser = document.getElementById("btn3");
eraser.onclick = function()
// 给画布添加一个按下的事件，做清除功能
c.onmousedown = clear;
// 给画布添加一个鼠标弹起的事件
c.onmouseup = function()
// 注意：橡皮擦在鼠标点击时移动可以清除，但是当鼠标松开点击时，应将上面鼠标移动清除事件删除；
c.onmousemove = null;
// 并重新赋予鼠标点击事件为画笔事件！
c.onmousedown = drawLine;
// 清空画板
var clearAll = document.getElementById("btn4");
clearAll.onclick = function()
// 清空画布
ctx.clearRect(0,0,600,400);
// 画笔画画功能
function drawLine(e1)
// 找到按下的位置
var x1 = e1.pageX - c.offsetLeft;
var y1 = e1.pageY - c.offsetTop;
// 画笔移动到鼠标点击处
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.strokeStyle = color;
ctx.lineWidth = numberWidth;
c.onmousemove = function(e2)
// 找到移动到的新点的位置
var x2 = e2.pageX - c.offsetLeft;
var y2 = e2.pageY - c.offsetTop;
ctx.lineTo(x2,y2);
ctx.stroke();
// 实现鼠标按下移动可以画画
c.onmousedown = drawLine;
// 鼠标松开就不画
c.onmouseup = function()
c.onmousemove = null;
</script>
</html>
以上是关于canvas小创作 之 实现一个画板（功能：画笔颜色粗细可以任选；橡皮擦功能和清空画板功能）的主要内容，如果未能解决你的问题，请参考以下文章