map系列（一）——canvas

2017-04-19 本文已影响88人洞听

近期工作用到了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

map系列（一）——canvas

首先呢，是canvas。

❤先来个simple demo

❤实现功能：

❤核心技能：

❤canvas相关

基本用法

❤完整代码如下，注释有详解

❤推荐一个特别赞的学习canvas的网站，简直不能再完美http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html

猜你喜欢

热点阅读