近期工作用到了map相关的一些知识，有些资料找起来着实费劲。忙里偷闲，顺手整理一下啦。(≧▽≦)/啦啦啦。
首先呢，是canvas。
❤先来个simple demo
涂鸦画板.png
❤实现功能：
- 选择画笔颜色
- 绘画
- 橡皮擦
- 清空画板
❤核心技能：
- 获取鼠标在画板中的位置
- canvas绘画
❤canvas相关
- canvas是一个可以使用脚本在其中绘制图形的HTML元素。注意：无论canvas 上画多少东西，canvas都始终是单个元素。
- canvas标签只有两个非通用属性width和height，canvas默认的大小为300*150.
- canvas元素也和普通的元素一样，有margin，border，background等属性。
- 如果在canvas绘制出来的图像是扭曲的，尝试在<canvas>的属性中明确规定宽和高，而不是使用CSS。
-
基本用法
- 元素引入
<canvas id="canvas" width="600" height="400">
<p>浏览器不支持canvas</p>
</canvas> - 渲染上下文
- canvas本身不具备画图形的功能，一切都是由canvas内部的CanvasRenderingContext2D对象来做的。
- 绘制矩形
-
canvas只支持一种原生的图形绘制：矩形。所有其他图形的绘制都至少需要生成一条路径。
-
canvas提供三种绘制矩形的方法
-
fillRect(x,y,width,height)绘制一个填充的矩形 -
strokeRect(x,y,width,height)绘制一个矩形的边框 -
clearRect(x,y,width,height)清除指定矩形矩形，让清除部分完全透明
-
-
绘制线段
1.开始路径ctx.beginPath()
2.设置起点ctx.moveTo(x,y)
3.设置终点ctx.lineTo(x,y)
4.绘制ctx.stroke()
5.结束路径ctx.closePath() -
绘制三角形
- 利用绘制线段的原理绘制三角形
-
绘制弧形
-
绘制弧形的参数分别是：弧形圆心x坐标、y坐标、半径、起始角（以三点钟的位置开始）、结束角、方向（true表示逆时针，false表示顺时针）
- ctx.arc(600,200,100,0,Math.PI*2,false);
-
绘制贝塞尔曲线：
-
二次贝塞尔曲线：
ctx.quadraticCurveTo (cpx, cpy, x, y)参数是控制点x坐标,控制点y坐标，结束点x坐标和结束点y坐标 -
三次贝塞尔曲线
ctx.bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y)参数是控制点1的x坐标和控制点1的y坐标、控制点2的x坐标和控制点2的y坐标、结束点x坐标和结束点y坐标
-
-
三次贝塞尔曲线绘制.png
❤完整代码如下，注释有详解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 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;
font-size: 0;
/*background-color: orange;*/
vertical-align: middle;
}
#box .control .changeColor input:nth-of-type(1){
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: 0 15px;
font-size: 20px;
background-color: #FDF5E5;
}
#canvas{
background-color: #FFEBCB;
}
b{
font-size: 20px;
}
</style>
</head>
<body>
<div id="box">
<div class="control">
<div class="changeColor">
选择画笔颜色：
<input type="button" value="黑色" />
<input type="button" value="粉色" />
<input type="button" value="红色"/>
<input type="button" value="橘色"/>
<input type="button" value="棕色" />
<input type="button" value="紫色" />
</div>
<div class="clear">
<input type="button" value="清空画布" id="clearAllBtn" />
当前选中的颜色：<b>黑色</b>
<input type="button" value="橡皮擦" id="rubberBtn" />
</div>
</div>
<canvas id="canvas" width="600" height="400"></canvas>
</div>
<script type="text/javascript">
var cvs = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
//记录坐标的对象（用来给move使用）
var pointerObj = {
}
//切换橡皮擦的状态
var isRubber = false;
//按下
cvs.addEventListener('mousedown', function (e) {
var x = e.offsetX;
var y = e.offsetY;
console.log(x + " : " + y);
pointerObj.x = x;
pointerObj.y = y;
if (isRubber) {
//橡皮擦
rubberFn(x, y);
} else {
//画画
draw(x, y);
}
//移动和抬起
this.addEventListener('mousemove', move);
this.addEventListener('mouseup', up);
})
//移动
function move (e) {
var x = e.offsetX;
var y = e.offsetY;
if (isRubber) {
//橡皮擦
rubberFn(x, y);
} else {
//画画
draw(x, y);
}
//在移动的时候把之前的存储起来
pointerObj.x = x;
pointerObj.y = y;
}
//抬起
function up () {
cvs.removeEventListener('mousemove', move);
}
//画画
function draw (x, y) {
ctx.beginPath();
ctx.lineWidth = 5;
//设置样式为圆头
ctx.lineCap = "round";
ctx.moveTo(x, y);
ctx.lineTo(pointerObj.x, pointerObj.y);
ctx.stroke();
ctx.closePath();
}
var colorBtns = document.querySelectorAll('.changeColor input');
for (var i = 0; i < colorBtns.length; i++) {
colorBtns[i].onclick = changeColor;
}
//改变画笔颜色
function changeColor () {
ctx.strokeStyle = getComputedStyle(this, null).backgroundColor;
var b = document.querySelector("b");
b.style.color = ctx.strokeStyle;
b.innerHTML = this.value;
//改变橡皮擦的状态
isRubber = false;
}
var clearAllBtn = document.querySelector("#clearAllBtn");
var rubberBtn = document.querySelector("#rubberBtn");
//清空画布
clearAllBtn.onclick = function () {
ctx.clearRect(0, 0, cvs.width, cvs.height);
}
//橡皮擦按钮
rubberBtn.onclick = function () {
//开启橡皮擦功能
isRubber = true;
}
//橡皮擦功能
function rubberFn (x, y) {
ctx.beginPath();
//裁剪之前先把当前场景保存下来
ctx.save();
//裁剪区域
ctx.arc(x, y, 20, 0, Math.PI * 2, false);
//裁剪
ctx.clip();
//在裁剪之后画一个清空矩形，但根据裁剪的原理，只有在裁剪区域才生效
ctx.clearRect(0, 0, cvs.width, cvs.height);
//然后在还原之前的场景
ctx.restore();
ctx.closePath();
}
</script>
</body>
</html>
❤推荐一个特别赞的学习canvas的网站，简直不能再完美http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html
❤下次见.gif
网友评论