canvas入门笔记

喜欢ヅ旅行 2022-05-08 05:12 192阅读 0赞

# canvas #

## 绘制平行线 ##

*  以下是绘制平行线的例子

### 线条模糊问题 ###

*  canvas关于线条的问题
    
    1.  默认的宽度是1px
    2.  默认的颜色是黑色
 *  产生线条模糊的原因

canvas的每条线都有一条无限细的“中线”，线条的宽度是从中线向两侧延伸的。

也就是说，我绘制1px，他会从上述的“中线“，向左右（或上下）各衍生出0.5px。

此时又有个问题，因为计算机不允许出现小于1px的图形，所以他做了个折中的问题，把两边都绘制了。

所以，如此一来，本来1px的线条，看起来2px宽的线条。而且颜色还有点灰，不是纯黑色，按照自己的

理解，应该是拉伸的是0.5px的线条，所以颜色还没有达到饱和。

*  解决线条模糊
    
    现在我们的原因找到了，Canvas中的line把中线与像素的起点对齐了，而不是像素的中间点。
    
    所以，我们让线条的中线和像素的中间点对齐就行了。

*  加0.5，让线条的中线和像素的中间点对齐
 *  不过貌似这样一来我们画线的时候就非常纠结，难道每次都去加这个让人郁闷的0.5？当然不是，因为我们大部分时间都是用变量保存值的，就不用给每个值加0.5 了  
    而且，对于lineWidth>1 的线，我们也不用管它：因为只有线条宽1px的时候，这个问题才最明显。

### 绘制三条不同颜色和宽度的平行线 ###

*  用到的新知识解释
 *  ctx.beginPath（）开启一个新的轨迹，
 *  ctx.lineWidth，设置线条的宽度

上面一例，为什么要这么写呢？

首先，我们不管设置线的宽度还是线的颜色，他都是上下文context的一个属性，他最后描边呈现出现的就是我们设置的值。结合例子来说，假设我们上述例子没有使用ctx.beginPath()，结果会是三条宽度30和颜色为blue的线。所以，正常我们的逻辑，就是描轨迹，然后使用stroke描边，那么，我们将他变成3条轨迹，并且ctx.stroke();描边即可。beginPath（）就是这么一个方法，开启新的轨迹。

## 绘制三角形 ##

\#\#\#填充三角形

<body>
        <canvas width="400" height="400"></canvas>
    
        
        <script>
            // 获取元素
            var myCanvas = document.querySelector('canvas');
            // 获取上下文
            var ctx = myCanvas.getContext('2d');
            // 绘制线条
            // 设置线条样式
            ctx.strokeStyle = 'red';
            ctx.moveTo(100, 100);
            ctx.lineTo(200, 100);
            ctx.lineTo(200, 200);
    
            ctx.fillStyle = 'red';
            ctx.fill();
        </script>
    </body>

*  ctx.fill();填充方法，用该方法不需要使用ctx.stroke();描边
 *  ctx.fillStyle 设置填充的颜色

### 描边三角形 ###

<body>
        <canvas width="400" height="400"></canvas>
    
        
        <script>
            // 获取元素
            var myCanvas = document.querySelector('canvas');
            // 获取上下文
            var ctx = myCanvas.getContext('2d');
            // 绘制线条
            // 设置线条样式
            ctx.strokeStyle = 'red';
            ctx.moveTo(100, 100);
            ctx.lineTo(200, 100);
            ctx.lineTo(200, 200);
            // 关闭路径
            ctx.closePath();
            ctx.stroke();
            
        </script>
    </body>

*  closePath()： 自动闭合路径，上述例子只画了两条直角边，使用关闭路径可以自动闭合

## 绘制镂空的正方形 ##

### 填充的非零环绕规则 ###

在填充的时候会遵从我们的非零环绕规则

判断是否填充方法

1.  看一块区域是否填充
2.  从这个区域拉一条直线
3.  看和这条直线相交的轨迹
4.  如果顺时针轨迹+1
5.  如果逆时针轨迹-1
6.  所有的轨迹的值计算出来
7.  如果是非0那么填充
8.  如果是0那么不填充

### 和线相关的属性和方法 ###

*  ctx.lineCap: 两端样式，即给线条两端带帽子
    
    butt（默认，不带帽子） || square（方体） || round（圆）
 *  ctx.lineJoin: 相交线的拐点
    
    miter(默认) || round(圆) || bevel(斜角)
 *  ctx.setLineDash(\[\]) : 设置虚线
    
    方法传递一个数组，该数组是用来描述排列方式的
    
    如\[5\],则实虚都按5px排，如\[5,10\]，则实按5px，虚按10px
    
    如果是\[5,10,15\]又是怎么排呢？其实这个排列方式是按 实虚实虚实虚…这样来的
    
    那么，这是一个奇数数组，那么就会按照实5虚10实15虚5实10虚15这样排列
 *  ctx.getLineDash(): 获取虚线的排列方式
    
    获取的是不重复的那一段排列方式
 *  ctx.lineDashOffset: 偏移
    
    如果是正的值 往后偏移 例：左右方向，整体往左
    
    如实是负的值 往前偏移 例：左右方向，整体往右

## 绘制一个从黑到白的渐变矩形 ##

<body>
        <canvas width="400" height="400"></canvas>
    
        
        <script>
            // 获取元素
            var myCanvas = document.querySelector('canvas');
            // 获取上下文
            var ctx = myCanvas.getContext('2d');
            // 绘制线条
            // 设置线条样式
            ctx.lineWidth = 30;
            for(var i = 0; i<255;i++){
                ctx.beginPath();
                ctx.moveTo(100 + i, 100);
                ctx.lineTo(101 + i, 100);
                ctx.strokeStyle = 'rgb('+ i +','+i +','+i+')';
                ctx.stroke();
            }
    
        </script>
    </body>

*  线是由点构成的，利用for循环生成若干个点

## 绘制网格 ##

### 如何获取canvas的宽高 ###

1.  myCanvas.height和myCanvas.width
    
     *  从canvas元素里获取
2.  ctx.canvas.height和ctx.canvas.width
    
     *  从ctx上下文中获取canvas元素，再从中获取宽高

### 绘制思路 ###

1.  获取元素和上下文
2.  设置网格大小，并取得canvas宽高
3.  通过canvas宽高和网格大小，计算出我们网格需要绘制多少条横线和竖线
4.  利用循环来绘制

## 绘制坐标系 ##

### 绘制思路 ###

1.  绘制坐标系
2.  确定原点
3.  确定距离画布旁边的距离
4.  确定坐标轴的长度
5.  确定箭头的大小 是个等腰三角形
6.  绘制箭头填充

## 绘制点 ##

### 绘制思路 ###

1.  获取坐标
2.  每一个坐标，是由一个正方形表示的，坐标是这个正方形的中心点
3.  确定点的尺寸，即正方形的边长
4.  通过计算，可以得到坐标周围的四个点

## 绘制折线图 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            canvas {
                border: 1px solid #000;
            }
        </style>
    </head>
    
    <body>
        <canvas width="400" height="400"></canvas>
    
        
        <script>
            // 1. 构造函数
            var LineChart = function (ctx) {
                // 获取绘图工具
                this.ctx = ctx || document.querySelector('canvas').getContext('2d');
                // 画布的大小
                this.canvasWidth = this.ctx.canvas.width;
                this.canvasHeight = this.ctx.canvas.height;
                // 绘制网格需要的属性
                // 网格的大小
                this.gridSize = 10;
                // 绘制坐标系需要的属性
                // 坐标系的间距
                this.space = 20;
                // 坐标原点
                this.x0 = this.space;
                this.y0 = this.canvasHeight - this.space;
                // 箭头的大小
                this.arrowSize = 10;
                // 绘制点
                this.dottedSize = 6;
            }
    
            // 2. 行为方法
            LineChart.prototype.init = function (data) {
                this.drawGrid();
                this.drawAxis();
                this.drawDotted(data);
            }
            // 绘制网格
            LineChart.prototype.drawGrid = function () {
    
                var xLineTotal = Math.floor(this.canvasHeight / this.gridSize);
                var yLineTotal = Math.floor(this.canvasWidth / this.gridSize);
    
                for (var i = 0; i < xLineTotal; i++) {
                    this.ctx.beginPath();
                    this.ctx.moveTo(0, i * this.gridSize - 0.5);
                    this.ctx.lineTo(this.canvasWidth, i * this.gridSize - 0.5);
                    this.ctx.strokeStyle = '#eee';
                    this.ctx.stroke();
                }
    
                // 画多少条y轴方向的线
                for (var i = 0; i < yLineTotal; i++) {
                    this.ctx.beginPath();
                    this.ctx.moveTo(i * this.gridSize - 0.5, 0);
                    this.ctx.lineTo(i * this.gridSize - 0.5, this.canvasHeight);
                    this.ctx.strokeStyle = '#eee';
                    this.ctx.stroke();
                }
            }
            // 绘制坐标系
            LineChart.prototype.drawAxis = function () {
    
                // 绘制x轴
                this.ctx.beginPath();
                this.ctx.strokeStyle = "#000";
                this.ctx.moveTo(this.x0, this.y0);
                this.ctx.lineTo(this.canvasWidth - this.space, this.y0)
                // 箭头
                this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 + this.arrowSize / 2);
                this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 - this.arrowSize / 2);
                this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
                this.ctx.stroke();
                this.ctx.fill();
    
                // 绘制y轴
                this.ctx.beginPath();
                this.ctx.moveTo(this.x0, this.y0);
                this.ctx.lineTo(this.space, this.space)
                // 箭头
                this.ctx.lineTo(this.space + this.arrowSize / 2, this.space + this.arrowSize);
                this.ctx.lineTo(this.space - this.arrowSize / 2, this.space + this.arrowSize);
                this.ctx.lineTo(this.space, this.space);
                this.ctx.stroke();
                this.ctx.fill();
            }
            // 绘制所有点
            LineChart.prototype.drawDotted = function (data) {
                // 1.数据的坐标 需要转换 canvas坐标
                // 2.再进行点的绘制
                // 3.把线连起来
                // 存当前对象
                var that = this;
                // 记录当前坐标,默认是原点
                var prevCanvasX = this.x0;
                var prevCanvasY = this.y0;
    
                data.forEach(function (item, i) {
                    // 这里面的this是window对象，所以要在调用之前把之前的对象存起来
                    // console.log(this);
                    // x = 原点的坐标 + 数据的坐标
                    // y = 原点的坐标 - 数据的坐标
                    var canvasX = that.x0 + item.x;
                    var canvasY = that.y0 - item.y;
    
                    // 开始绘制
                    that.ctx.moveTo(canvasX - that.dottedSize / 2, canvasY - that.dottedSize / 2);
                    that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY - that.dottedSize / 2);
                    that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY + that.dottedSize / 2);
                    that.ctx.lineTo(canvasX - that.dottedSize / 2, canvasY + that.dottedSize / 2);
                    that.ctx.closePath();
                    that.ctx.fill();
                    // 点的连线
                    // 第一个点的上一个点是 原点 x0 y0
                    // 当不是第一个点时 起点为上一个点
                    
                    that.ctx.beginPath();
                    that.ctx.moveTo(prevCanvasX, prevCanvasY);
                    that.ctx.lineTo(canvasX, canvasY);
                    that.ctx.stroke();
                    // 记录当前坐标，下一个循环要用
                    prevCanvasX = canvasX;
                    prevCanvasY = canvasY;
                });
            }
    
            // 3. 初始化
            // 点的坐标需要传参，由实例对象调用方法绘制,实现数据可视化
            // 点的坐标由一个数组记录，假设点的坐标的数据是
            var data = [{
                x: 100,
                y: 120
            }, {
                x: 150,
                y: 130
            }, {
                x: 200,
                y: 150
            }, {
                x: 260,
                y: 170
            }, {
                x: 300,
                y: 20
            }, ];
    
            var lineChart = new LineChart();
            lineChart.init(data);
        </script>
    </body>
    
    </html>

### 绘制思路 ###

1.  首先思考一下，我们折线图是由什么东西组成的？要有网格，坐标系，还有点吧，后面，我们还需要把点连线起来。
2.  那么，我们可以知道，绘制折线图，需要用到很多属性和方法，比如网格中格子的大小啦，坐标系中的原点，绘制的时候，如何绘制等等。
3.  思路分析到这，可以得知，我们画一个折线图，可以用构造函数来构造。

## 绘制矩形 ##

\#\#\#方法说明

*  ctx.rect(x0,y0,x1,y1)
    
    绘制一个矩形路径 不是独立路径，因为是路径，所以需要自行描边或者填充
    
    说明参数：
    
    x0，canvas坐标系的x轴
    
    y0，canvas坐标系的y轴
    
    x1，水平方向长度，也可以说是宽
    
    y1，垂直方向长度，也可以说是高
    
    下面的方法，参数类似，不赘述
 *  ctx.strokeRect(x0,y0,x1,y1)
    
    描边矩形，有自己独立的路径
 *  ctx.fillRect(x0,y0,x1,y1)
    
    填充矩形，有自己独立的路径
 *  ctx.clearRect(x0,y0,x1,y1)
    
    擦除一个矩形 相当于橡皮擦

## 绘制渐变的矩形 ##

*  ctx.createLinearGradient(x0,y0,x1,y1) 创建一个渐变方案
    
    参数1,2 起始点 参数3,4结束点，需要说明的是这四个都是canvas坐标系的坐标
 *  渐变方案.addColorStop(0,‘pink’) 添加颜色点
 *  通过ctx.fillStyle 设置方案

## 绘制圆弧 ##

### 绘制步骤 ###

*  ctx.arc(圆心x，圆心y，半径，起始绘制位置，结束绘制位置，绘制的方向)

1.  绘制圆弧
2.  确定圆心
3.  确定半径
4.  确定起始绘制的位置和结束绘制的位置 确定弧的长度和位置 startAngle endAngle 弧度
5.  取得绘制的方向 direction 默认是顺时针 false 逆时针 true

## 绘制扇形 ##

### 绘制步骤 ###

1.  先将点移至圆心位置
2.  接着画出圆弧
3.  然后闭合路径即可

## 绘制n等分的随机颜色的圆 ##

*  根据需要几等分，然后算出几等分的角度
 *  通过for循环来描绘每一个扇形拼成一个圆

## 绘制饼图 ##

*  根据数据绘制饼图
 *  算出数据在总量中占多少分，可以算出对应的弧度

## 在画布中心绘制文字 ##

### 方法说明 ###

*  ctx.font ：设置字体属性
 *  ctx.textAlign ：设置左右对齐方式
 *  ctx.textBaseline ：设置垂直对齐方式
 *  ctx.direction ： rtl || ltr ，与左右对齐的start end有关，很少用，用到时查文档
 *  ctx.strokeText(字符串，x，y) ： 描边文字
 *  ctx.fillText(字符串，x，y) ： 填充文字
 *  ctx.measureText(字符串) ： 获得一个对象，里面有width属性，可以用这个方法获得字符串的宽度

## 绘制完整饼状图 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            canvas {
                border: 1px solid #000;
            }
        </style>
    </head>
    
    <body>
        <canvas width="400" height="400"></canvas>
    
        
        <script>
            // 获取元素
            var myCanvas = document.querySelector('canvas');
            // 获取上下文
            var ctx = myCanvas.getContext('2d');
    
            // 1. 根据数据绘制一个饼状图
            // 2. 绘制标题 从扇形的弧中心伸出一条线在画一条横线在横线的上面写上文字标题
            // 3. 在画布的左上角 绘制说明 一个和扇形一样颜色的矩形 旁边就是文字说明
    
            var PieChart = function (ctx) {
                this.ctx = ctx || document.querySelector('canvas').getContext('2d');
                // 绘制饼图中心
                this.w = this.ctx.canvas.width;
                this.h = this.ctx.canvas.height;
                // 绘制饼图中心
                this.x0 = this.w/2 + 20;
                this.y0 = this.h/2;
                // 半径
                this.radius = 100;
                // 伸出去线的长度
                this.outLine = 20;
                // 说明的矩形大小
                this.rectW = 30;
                this.rectH = 16;
                // 间隔上面距离
                this.space = 20;
                // 方块间距
                this.rectSpace = 10;
    
            }
    
            PieChart.prototype.init = function (data) {
                // 1. 准备数据
                this.drawPie(data);
            };
    
            PieChart.prototype.drawPie = function () {
                // 先存好实例对象
                var that = this;
                // 1. 转换弧度
                var angleList = this.transformAngle(data);          
                // 2.绘制饼状图
                var startAngle = 0;
                angleList.forEach(function (item,i) {  
                    // 当前的结束弧度要等于下一次的起始弧度
                    
                    var endAngle = startAngle + item.angle;
                    that.ctx.beginPath();
                    that.ctx.moveTo(that.x0,that.y0);
                    that.ctx.arc(that.x0,that.y0,that.radius,startAngle,endAngle);
                    var color = that.ctx.fillStyle = that.getRandomColor();
                    that.ctx.fill();
                    // 下一次要使用当前的这一次的结束角度
                    // 绘制标题
                    that.drawTitle(startAngle,item.angle,color,item.title);
                    that.drawDesc(i,item.title);
                    startAngle = endAngle;
                });
    
            };
    
            PieChart.prototype.drawTitle = function (startAngle,angle,color,title) {
                // 绘制思路
                // 1. 确定伸出去的线 通过圆心点 通过伸出去的点 确定这个线
                // 2. 确定伸出去的点 需要确定伸出去的线的长度
                // 3. 固定伸出去的线的长度
                // 4. 计算这个点的坐标
                // 5. 需要根据角度和斜边的长度
                // 5.1 使用弧度 当前扇形的起始弧度 + 对应的弧度的一半
                // 5.2 半径 + 伸出去的长度
                // 5.3 求得公式
                // 5.3.1 outX = x0 + cos( angle ) * (r + outLine)
                // 5.3.2 outY = y0 + sin( angle ) * (r + outLine)
    
                // 斜边
                var edge = this.radius + this.outLine;
                // x轴方向的直角边
                var edgeX = Math.cos(startAngle + angle / 2) * edge;
                // y轴方向的直角边
                var edgeY = Math.sin(startAngle + angle / 2) * edge;
                // 计算出去的点坐标
                var outX = this.x0 + edgeX;
                var outY = this.y0 + edgeY;
                this.ctx.beginPath();
                this.ctx.moveTo(this.x0,this.y0);
                this.ctx.lineTo(outX,outY);
                this.ctx.strokeStyle = color;
                
                // 画文字和下划线
                // 判断线的方向
                // 伸出去的点在x0的左边 线的方向就是左边
                // 伸出去的点在x0的右边 线的方向就是右边
                // 结束的点坐标 和文字大小
                this.ctx.font = '14px Microsoft YaHei';
                var textWidth = this.ctx.measureText(title).width;
                if(outX > this.x0){
                    this.ctx.lineTo(outX + textWidth,outY);
                    this.ctx.textAlign = 'left';
    
                }else{
                    this.ctx.lineTo(outX - textWidth,outY);
                    this.ctx.textAlign = 'right';
                }
                
                this.ctx.stroke();
                this.ctx.textBaseline = 'bottom';
                this.ctx.fillText(title,outX,outY);
    
            };
    
            PieChart.prototype.drawDesc = function (index,title) {
                // 绘制说明
                // 矩形的大小   this.rectW this.rectH
                // 距离上和左边的间距 this.space
                // 矩形之间的间距 this.rectSpace
                this.ctx.fillRect(this.space,this.space + index * (this.space + this.rectSpace),this.rectW,this.rectH);
                // 绘制文字
                this.ctx.beginPath();
                this.ctx.textBaseline = 'top';
                this.ctx.textAlign = 'left';
                this.ctx.font = '12px Microsoft YaHei';
                this.ctx.fillText(title,this.space + this.rectW + 10 ,this.space + index * (this.space + this.rectSpace))
            };
    
            PieChart.prototype.transformAngle = function(data){
                // 返回的数据内容包含弧度的
                var total = 0;
                data.forEach(function (item,i) {  
                    total +=item.num;
                });
    
                // 计算弧度 并且追加到当前的对象内容
                data.forEach(function(item,i){
                    var angle = item.num / total * Math.PI * 2;
                    item.angle = angle;
                });
                
                return data;
    
            };
    
            PieChart.prototype.getRandomColor =function(){
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                return 'rgb(' + r + ',' + g + ',' + b + ')';
            }
    
            // 准备数据
            var data = [{
                    title: '10-20岁',
                    num: 6
                }, {
                    title: '20-30岁',
                    num: 30
                },
                {
                    title: '30-40岁',
                    num: 10
                },
                {
                    title: '40-50岁',
                    num: 4
                },
            ];
    
            var pieChart = new PieChart();
            pieChart.init(data);
    
        </script>
    </body>
    
    </html>

\#\#\#需求分析

1.  根据数据绘制一个饼状图
2.  绘制标题 从扇形的弧中心伸出一条线在画一条横线在横线的上面写上文字标题
3.  在画布的左上角 绘制说明 一个和扇形一样颜色的矩形 旁边就是文字说明

### 绘制饼图 ###

*  绘制思路看参考之前的
 *  根据我们的需求，我们再绘制饼图的同时，就可以绘制饼图的标题以及描述，这样可以少用几个循环

### 绘制标题 ###

*  绘制思路
 *      // 1. 确定伸出去的线 通过圆心点 通过伸出去的点 确定这个线
                // 2. 确定伸出去的点 需要确定伸出去的线的长度
                // 3. 固定伸出去的线的长度
                // 4. 计算这个点的坐标
                // 5. 需要根据角度和斜边的长度
                // 5.1 使用弧度 当前扇形的起始弧度 + 对应的弧度的一半
                // 5.2 半径 + 伸出去的长度
                // 5.3 求得公式
                // 5.3.1 outX = x0 + cos( angle ) * (r + outLine)
                // 5.3.2 outY = y0 + sin( angle ) * (r + outLine)

### 绘制描述 ###

*  绘制矩形，我们以左上角的点为基准，x坐标不变，y坐标根据观察可得公式，this.space + index \* (this.space + this.rectSpace)，这样就可以画出n个矩形
 *  绘制文字，与绘制矩形类似，算出公式并且调整样式对齐

## 绘制图片 ##

### 绘制图片的三种方式 ###

*  ctx.drawImage()
 *  3参数 图片对象 canvas坐标x，canvas坐标坐标y ctx.drawImage(img,x,y)
 *  5参数 图片对象 canvas坐标x，canvas坐标坐标y 图片宽 图片高 ctx.drawImage(img,x,y,w,h)
 *  9参数 图片对象 图片上定位的坐标 x y 在图片上截取多大的区域 w h 绘制在画布上的坐标 x1 y1 图片w1h1宽高ctx.drawImage(img,x,y,w,h,x1,y2,w1,h1)

## 帧动画 ##

## 帧动画案例-小人行走 ##

*  模拟游戏中，角色的行走
 *  图片是一张精灵图，通过修改精灵图里的定位与画布的位置，实现角色在画布中行走

## canvas的转换 ##

*  ctx.translate(x,y) 平移 移动画布的原点
 *  ctx.scale(x,y) 表示宽高的缩放比例
 *  ctx.rotate(angle) 表示旋转角度
 *  上述方法都与canvas坐标系坐标原点有关