0. 前言
过年了啊，又是新的一年，首先祝大家新年快乐，网上有一个游戏叫什么？你画我猜，在上面你可以画点你想画的东西，可以改变画笔的颜色，如果一不小心你画错了，是不是得有一个橡皮擦，可以把你写错的擦掉，那用什么实现这个画板呢？canvas啊！！！
鸡年大吉、新年快乐.jpg
1. 简介
canvas本身没有绘图能力，只是定义了一个容器，都是由canvas内部的CanvasRenderingContext2D对象来做，需要我们用 JavaScript脚本 完成绘制工作。
2. 标签属性
| 标签 | 描述 |
|---|---|
| height | 设置 canvas 的高度。 |
| width | 设置 canvas 的宽度。 |
| fill() | 可以填充 |
| fillRect(x,y,width,height) | 绘制一个矩形边框 |
| fillRect(x,y,width,height) | 绘制一个填充的矩形 |
| clearRect(x,y,width,height) | 清除指定矩形区域，让清除部分完全透明 |
| ctx.strokeStyle | 可以改变画笔颜色 |
| ctx.beginPath() | 设置开始路径 |
| ctx.moveTo(x,y) | 设置起点 |
| ctx.lineTo(x,y) | 设置终点 |
| ctx.stroke() | 绘制 |
| ctx.closePath() | 结束路径 |
| ctx.arc(弧形圆心x坐标，y坐标，半径，起始角(以3点钟的位置开始)，结束角、方向(true表示逆时针，false表示顺时针)) | 绘制一个弧形 |
| ctx.quadraticCurveTo(cpx,cpy,x,y)参数是控制点x坐标，控制点y坐标，结束点x坐标，结束点y坐标 | 绘制二次贝塞尔曲线 |
| ctx.quadraticCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)参数是控制点1的x坐标，控制点1的y坐标，控制点2的x坐标，控制点2的y坐标，结束点x坐标，结束点y坐标 | 绘制三次贝塞尔曲线 |
3. 代码实现
3.1 静态页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
width: 600px;
height: 500px;
margin: 100px auto;
border: 1px solid black;
}
#box .control{
height: 100px;
}
#box .control div{
height: 50px;
line-height: 50px;
}
#box .control .changeColor{
padding-left: 15px;
}
#box .control .changeColor input{
width: 30px;
height: 30px;
margin: 0 15px;
vertical-align: middle;
}
#box .control .changeColor input:first-of-type{
background-color: black;
}
#box .control .changeColor input:nth-of-type(2){
background-color: pink;
}
#box .control .changeColor input:nth-of-type(3){
background-color: red;
}
#box .control .changeColor input:nth-of-type(4){
background-color: orange;
}
#box .control .changeColor input:nth-of-type(5){
background-color: brown;
}
#box .control .changeColor input:nth-of-type(6){
background-color: purple;
}
#box .control .clear{
height: 50px;
}
#box .control .clear input{
width: 100px;
height: 50px;
margin-left: 15px;
font-size: 20px;
background-color: oldlace;
}
#canvas{
background-color: blanchedalmond;
}
b{
font-size: 20px;
}
</style>
</head>
<body>
<div id="box">
<div class="control">
<div class="changeColor">
选择画笔颜色：
<input type="button" id="" />
<input type="button" id="" />
<input type="button" id="" />
<input type="button" id="" />
<input type="button" id="" />
<input type="button" id="" />
</div>
<div class="clear">
<input type="button" value="清空画布" />
当前选中的颜色是：<b>黑色</b>
<input type="button" value="橡皮擦" />
</div>
</div>
<canvas id="canvas" width="600" height="400"></canvas>
</div>
</body>
</html>
静态页面.png
3.2 画笔功能
画笔实现思路
- 获取canvas
- 设置初始化当前画布功能为画笔状态，以为我们后边要做橡皮擦功能，点击橡皮擦和颜色的时候要做一个区分。
- 鼠标按下记录鼠标点击位置距离canvas画布的坐标并移动，记录上一个坐标点，然后移动鼠标开始画画
- 鼠标抬起移除鼠标移动事件
<script type="text/javascript">
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
//初始化当前画布为画笔状态
canvas.isDraw = true;
//按下事件
canvas.addEventListener("mousedown",function(e){
//鼠标点击在canvas中的位置
var x = e.offsetX;
var y = e.offsetY;
//记录旧的点
this.oldPoint = {
x : x - 1,
y : y - 1
}
if (this.isDraw) {
//画笔功能
draw(x,y);
} else {
//橡皮擦功能
clearPart(x,y);
}
//绑定移动和抬起事件
this.addEventListener("mousemove",move);
this.addEventListener("mouseup",up);
})
function up() {
this.removeEventListener("mousemove",move);
}
function move(e) {
var x = e.offsetX;
var y = e.offsetY;
if (this.isDraw) {
//画笔功能
draw(x,y);
} else {
//橡皮擦功能
clearPart(x,y);
}
this.oldPoint = {
x : x,
y : y
}
}
//画的方法
function draw(x,y){
ctx.beginPath();
//线的宽度
ctx.lineWidth = 5;
//线的样式
ctx.lineCap = "round";
ctx.moveTo(x,y);
ctx.lineTo(canvas.oldPoint.x,canvas.oldPoint.y);
ctx.stroke();
ctx.closePath();
}
</script>
画笔功能.gif
3.3 颜色选择
颜色实现思路
- 点击颜色让画布的ctx.strokeStyle等于你点击的背景颜色
- 创建颜色数据结构，根据颜色改变b标签的内容
//获取改变颜色按钮
var btns = document.querySelectorAll(".changeColor input");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = changeColor;
}
//颜色匹配数据结构
var colorObj = {
"#000000" : "黑色",
"#ffc0cb" : "粉色",
"#ff0000" : "红色",
"#ffa500" : "橘色",
"#a52a2a" : "棕色",
"#800080" : "紫色"
}
//改变画笔颜色
function changeColor() {
ctx.strokeStyle = getComputedStyle(this,null).backgroundColor;
var b = document.querySelector("b");
b.style.color = ctx.strokeStyle;
b.innerHTML = colorObj[ctx.strokeStyle];
//改变画笔状态
canvas.isDraw = true;
}
画笔.gif
3.4 清空画布
清空画布思路
- 获取元素节点
- 点击按钮清空canvas画布
var clearAllBtn = document.querySelector(".clear input");
clearAllBtn.onclick = function () {
ctx.clearRect(0,0,canvas.width,canvas.height);
}
清空画布.gif
3.5 橡皮擦
橡皮擦思路
- 获取元素节点，改变橡皮擦状态
- 利用canvas剪裁的思路
裁剪（在canvas中的裁剪和平时的裁剪功能不一样在这里，裁剪是指在裁剪区域去显示我们所画的图）
var clearBtn = document.querySelector(".clear input:last-of-type");
clearBtn.onclick = function () {
//改变状态为橡皮擦状态
canvas.isDraw = false;
}
//橡皮擦功能
function clearPart(x,y) {
//保存场景
ctx.save();
ctx.beginPath();
ctx.arc(x,y,10,0,Math.PI * 2,false);
ctx.clip();
ctx.clearRect(0,0,canvas.width,canvas.height);
//还原场景
ctx.restore();
}
橡皮擦.gif
4. 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
width: 600px;
height: 500px;
margin: 100px auto;
border: 1px solid black;
}
#box .control{
height: 100px;
}
#box .control div{
height: 50px;
line-height: 50px;
}
#box .control .changeColor{
padding-left: 15px;
}
#box .control .changeColor input{
width: 30px;
height: 30px;
margin: 0 15px;
vertical-align: middle;
}
#box .control .changeColor input:first-of-type{
background-color: black;
}
#box .control .changeColor input:nth-of-type(2){
background-color: pink;
}
#box .control .changeColor input:nth-of-type(3){
background-color: red;
}
#box .control .changeColor input:nth-of-type(4){
background-color: orange;
}
#box .control .changeColor input:nth-of-type(5){
background-color: brown;
}
#box .control .changeColor input:nth-of-type(6){
background-color: purple;
}
#box .control .clear{
height: 50px;
}
#box .control .clear input{
width: 100px;
height: 50px;
margin-left: 15px;
font-size: 20px;
background-color: oldlace;
}
#canvas{
background-color: blanchedalmond;
}
b{
font-size: 20px;
}
</style>
</head>
<body>
<div id="box">
<div class="control">
<div class="changeColor">
选择画笔颜色：
<input type="button" id="" />
<input type="button" id="" />
<input type="button" id="" />
<input type="button" id="" />
<input type="button" id="" />
<input type="button" id="" />
</div>
<div class="clear">
<input type="button" value="清空画布" />
当前选中的颜色是：<b>黑色</b>
<input type="button" value="橡皮擦" />
</div>
</div>
<canvas id="canvas" width="600" height="400"></canvas>
</div>
<script type="text/javascript">
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
//初始化当前画布为画笔状态
canvas.isDraw = true;
//按下事件
canvas.addEventListener("mousedown",function(e){
//计算出鼠标点击在canvas中的位置
var x = e.offsetX;
var y = e.offsetY;
//记录旧的点
this.oldPoint = {
x : x - 1,
y : y - 1
}
if (this.isDraw) {
//画笔功能
draw(x,y);
} else {
//橡皮擦功能
clearPart(x,y);
}
//绑定移动和抬起事件
this.addEventListener("mousemove",move);
this.addEventListener("mouseup",up);
})
function up() {
this.removeEventListener("mousemove",move);
}
function move(e) {
var x = e.offsetX;
var y = e.offsetY;
if (this.isDraw) {
//画笔功能
draw(x,y);
} else {
//橡皮擦功能
clearPart(x,y);
}
this.oldPoint = {
x : x,
y : y
}
}
//画的方法
function draw(x,y){
ctx.beginPath();
//线的宽度
ctx.lineWidth = 5;
//线的样式
ctx.lineCap = "round";
ctx.moveTo(x,y);
ctx.lineTo(canvas.oldPoint.x,canvas.oldPoint.y);
ctx.stroke();
ctx.closePath();
}
//获取改变颜色按钮
var btns = document.querySelectorAll(".changeColor input");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = changeColor;
}
//颜色匹配数据结构
var colorObj = {
"#000000" : "黑色",
"#ffc0cb" : "粉色",
"#ff0000" : "红色",
"#ffa500" : "橘色",
"#a52a2a" : "棕色",
"#800080" : "紫色"
}
//改变画笔颜色
function changeColor() {
ctx.strokeStyle = getComputedStyle(this,null).backgroundColor;
var b = document.querySelector("b");
b.style.color = ctx.strokeStyle;
b.innerHTML = colorObj[ctx.strokeStyle];
//改变画笔状态
canvas.isDraw = true;
}
var clearAllBtn = document.querySelector(".clear input");
clearAllBtn.onclick = function () {
ctx.clearRect(0,0,canvas.width,canvas.height);
}
//橡皮擦按钮
var clearBtn = document.querySelector(".clear input:last-of-type");
clearBtn.onclick = function () {
//改变状态为橡皮擦状态
canvas.isDraw = false;
}
//橡皮擦功能
function clearPart(x,y) {
//保存场景
ctx.save();
ctx.beginPath();
ctx.arc(x,y,10,0,Math.PI * 2,false);
ctx.clip();
ctx.clearRect(0,0,canvas.width,canvas.height);
//还原场景
ctx.restore();
}
</script>
</body>
</html>
5. 结束语
哎，又涨了一岁，祝大家新年快乐啊，给大家拜个年，当然你们也得给个红包哈，点个赞，分个享啥的，最后希望大家在新的一年开心，快乐，工作顺利。
网友评论