Canvas知识点之二

最新推荐文章于 2024-01-07 00:03:58 发布
最新推荐文章于 2024-01-07 00:03:58 发布
阅读量360 收藏
点赞数 1
分类专栏： 原创 文章标签： canvas 饼状图

1.补充一个数组的map方法：

        /*
        * map方法定义在Array.prototype上，所以所有的数组都可以访问
        * 语法：数组.map( 回调函数 )
        * 作用：接收回调函数的返回值，共同构成一个新数组返回。
        * */

        var arr = [1,2,3,4,5];

        var newArr = arr.map( function( val, i, arr ) {
            return val * 5 - i;
        });

        console.log( newArr );

2.canvas是基于状态:

        /*
        * canvas是基于状态：
        * strokeStyle = 'red';
        * strokeStyle = 'blue';
        * 主要strokeStyle变化了，那么接下来所有和描边相关的绘制方法都会受到影响。
        * */
      例如：
          <canvas id="cvs" width="500" height="500"></canvas>
    <script>
    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');

    ctx.strokeStyle = 'blue';
    ctx.strokeRect(10,10,50,50);

    // ctx.strokeStyle = 'red'; 屏蔽这一句,两个矩形框颜色都是blue，打开后第二个变为red
    ctx.strokeRect(50,50,50,50);
    </script>

3.在画布上画好内容后，使用toDataURL方法可把画布内容转化为base64编码格式的图片，可以尝试使用打印的内容替换canvas标签看下效果

        // 把画布的内容转换为base64编码格式的图片
        console.log(cvs.toDataURL( 'image/png' ));

        /*·
        * base64编码图片的应用：
        * 如果一个网站中有少量的小图片，可以考虑直接使用base64编码。
        * */

4.画弧形
最主要是理解ctx.arc中起始角度和终止角度在哪里，是顺时针还是逆时针
这里写图片描述

    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        /*
        * 画弧( 画的是路径 )
        * ctx.arc( 圆心x轴坐标，圆心y轴坐标，半径, 起点弧度，结束点弧度，是否逆时针画(可选) )
        * arc方法内部会先从路径结束点到弧的起点画一条路径线。
        * 起点弧度、结束点弧度以及弧度的方向共同决定了弧的大小。
        * */

        // 把角度转换为弧度
        function angleToRadian( angle ) {
            return Math.PI / 180 * angle;
        }

        // 顺时针画一段弧 看清楚哪里是90度 哪里是270度 顺时针哦 别搞错了！！！
        ctx.arc( 100, 100, 30, angleToRadian( 90 ), angleToRadian( 270 ),false );
        ctx.stroke();

        // 逆时针画一段弧
        ctx.beginPath();
        ctx.arc( 200, 100, 30, angleToRadian( 90 ), angleToRadian( 270 ), true );
        ctx.stroke();

        // 一个圆
        ctx.beginPath();
        ctx.arc( 300, 100, 30, angleToRadian( 90 ), angleToRadian( 360 ) );
        ctx.stroke();

        /*
        * 画扇形：
        * 1、先设置路径起点为圆心
        * 2、画弧
        * 3、闭合路径
        * */
        ctx.beginPath();
        ctx.moveTo( 250, 250 ); //默认是顺时针
        ctx.arc( 250, 250, 90, angleToRadian( 45 ), angleToRadian( 180 ) );
        ctx.closePath();
        ctx.stroke();

    </script>

5.求一组数中的最大值,用call和apply的方法（为下面讲解做铺垫…）

    var numMax = Math.max(2,3,4,6,8,9);

    // 用call方法
    var num = Math.max.call(null,(2,3,4,6,8,9));

    // 用apply的方法
    var numArr = [2,3,4,6,8,9];
    var num = Math.max.apply(null,numArr);

    console.log(num);

6.在canvas上画空心字,实心字,以及各自的参考点

    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        /*
        * 设置文字的属性
        * ctx.font = 和css语法一样。
        * 注意：这里设置字体大小时必须带单位，单位支持css的所有表示方式。
        * 注意：单独设置字体大小不会生效，必须要加一个额外属性样式。
        * */

        ctx.font = '2rem 微软雅黑';
        /*
        * 绘制描边文字：
        * ctx.strokeText( 文字, 参考x轴坐标，参考y轴坐标，限制文字的最大长度(可选) )
        * */
        ctx.strokeText( '我是空心字体strokeText', 100, 100 );

        /*
         * 绘制填充文字：
         * ctx.fillText( 文字, 参考x轴坐标，参考y轴坐标，限制文字的最大长度(可选) )
         * */
        ctx.fillText( '我是实心字fillText', 100, 200 );


        // 绘制空心文字的参考点
        ctx.beginPath();
        ctx.arc( 100, 100, 4, 0, Math.PI * 2 );
        ctx.stroke();

        // 绘制实心文字的参考点
        ctx.beginPath();
        ctx.arc( 100, 200, 4, 0, Math.PI * 2 );
        ctx.fill();
    </script>

这里写图片描述

7.canvas上字的参考点和基线共同决定了字的位置

    <canvas id="cvs" width="500" height="500"></canvas>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        ctx.font = '2rem 微软雅黑';

        /*
        * 设置文字的水平对其方式：
        * ctx.textAlign = 'left || start' 、 'right || end' 、 'center'
        * 默认值为start。
        * */

        /*
        * 设置文字的垂直对其方式：
        * ctx.textBaseline = 'top' 、'bottom'、'middle'、'alphabetic'、'hanging'、'ideographic'
        * 默认值为alphabetic。
        * */
       // 以参考点为坐标轴（0，0）画x,y轴,x轴即为基线
        //textAlign表示参考点在字的哪一侧（左中右）
        ctx.textAlign = 'left';

        //textBaseline表示基线在字的哪一侧（上中下）
        ctx.textBaseline = 'bottom';
        ctx.fillText( '位置取决于参考点和基线', 100, 200 );

        // 绘制文字的参考点
        ctx.beginPath();
        ctx.arc( 100, 200, 4, 0, Math.PI * 2 );
        ctx.fill();
    </script>

这里写图片描述

8.如何用正弦余弦函数来求圆上某一点的坐标？
我们在正常的坐标系中是向右为x正向，向上为y正方向，角度时逆时针转的。
在我们的画布上，角度时顺指针转的，向右是0度，是X轴正方向，垂直向下是90度，是Y轴正方法，所以公式依然适用。

假设圆心的坐标为(a,b)，那么圆的方程是(x-a)^2＋(y-b)^2＝r^2
根据方程可以求出圆上的各点坐标，已知角度m，圆上点的坐标分别是：（r*cosm+a，r*sinm+b）

9.有了上面那么多铺垫,我们来画一个饼状图，形状如下：
这里写图片描述

pie_chart.js

(function( w ) {

    // 把角度转换为弧度
    function angleToRadian( angle ) {
        return Math.PI / 180 * angle;
    }

    // 混入式继承
    function extend( o1, o2 ) {
        for ( var key in o2 ) {
            // 只有o2自己的属性才会copy到o1身上
            if ( o2.hasOwnProperty( key ) ) {
                o1[ key ] = o2[ key ];
            }
        }
    }

    /*
     * constrcutor { Pipe } 饼图构造函数
     * param { x: number } 圆心x轴坐标
     * param { y: number } 圆心y轴坐标
     * param { r: number } 圆半径
     * param { data: Array } 绘制饼图所需的数据
     * */
    function Pipe( x, y, r, data ) {

        this.x = x;
        this.y = y;
        this.r = r;
        this.data = data;

        // 一组颜色
        this.colors = [ 'orange', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'peru', 'pink' ];
    }

    // 给原型扩充方法
    extend( Pipe.prototype, {

        // 绘制饼图
        draw: function() {

            // 在外面保存一下this
            var self = this;

            // 数据的总和
            var num = 0;
            this.data.forEach( function( obj ) {
                num += obj.val;
            });

            // 一个数据值所占用的角度
            var baseAngle = 360 / num;

            // 假设一开始就绘制了一个起始为0，结束为0的扇形
            var startAngle = 0,
                endAngle = 0,
                lineAngle = 0,
                lineX, lineY;

            // 画扇形
            this.data.forEach( function( obj, i ) {

                // 每次进来，计算当前扇形的起始角度和结束角度

                // 下一个扇形的起始角度，是当前扇形的结束角度
                startAngle = endAngle;
                // 这个结束角度 = 上一个扇形的结束角度 + 当前数值所对应的角度
                endAngle = endAngle + baseAngle * obj.val;

                // 求扇形中间线的角度
                lineAngle = startAngle + baseAngle * obj.val / 2;
                /*
                * 根据中间线的角度，求中间的线的x和y坐标：
                * x = 圆心x + r * Math.cos( angleToRadian( pointAngle ) )
                * y = 圆心y + r * Math.sin( angleToRadian( pointAngle ) )
                * */
                lineX = self.x + ( self.r + 20 ) * Math.cos( angleToRadian( lineAngle ) );
                lineY = self.y + ( self.r + 20 ) * Math.sin( angleToRadian( lineAngle ) );


                // 画每一个扇形
                ctx.beginPath();
                ctx.moveTo( self.x, self.y );
                ctx.arc( self.x, self.y, self.r, angleToRadian( startAngle ), angleToRadian( endAngle ) );
                ctx.closePath();
                ctx.fillStyle = self.colors[ i ];
                ctx.fill();

                // 画每一个扇形的平分线
                ctx.beginPath();
                ctx.moveTo( self.x, self.y );
                ctx.lineTo( lineX, lineY );
                ctx.strokeStyle = self.colors[ i ];
                ctx.stroke();

                // 绘制文字
                ctx.textBaseline = 'center';
                if ( lineAngle >= 90 && lineAngle <= 270 ) {
                    ctx.textAlign = 'right';
                }else {
                    ctx.textAlign = 'left';
                }
                ctx.fillText( obj.msg, lineX, lineY );
            });
        }
    } );

    // 把构造函数暴露到全局
    w.Pipe = Pipe;

}( window ));

    <canvas id="cvs" width="500" height="500"></canvas>
    <script src="pie_chart.js"></script>
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        // [ 10, 30, 50, 60, 20 ]
        var pipe = new Pipe( 200, 200, 80, [
            {
                val: 10,
                msg: '手机震动'
            },
            {
                val: 30,
                msg: '有人在敲门'
            },
            {
                val: 50,
                msg: 'TA好像喜欢我'
            },
            {
                val: 50,
                msg: '忙完这事就轻松了'
            },
            {
                val: 50,
                msg: '这次考试还可以'
            },
            {
                val: 90,
                msg: '今晚早点睡觉'
            },
        ] );
        pipe.draw();
    </script>
光影流年925
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas知识点总结
qq_34109078的博客
06-06 1042
由于项目中很少涉及canvas相关的知识，我就一直拖着没练习，最近面试了几家公司都问到了对canvas的了解，是时候好好研究一下canvas了，以下是我阅读HTML5和CSS3权威指南这本书关于canvas的总结一. canvas一般用来干啥我当时对canvas的抵触点就在于，这不就是个用来画图的吗，能干啥呢，老听别人说他很强大，自己没啥感觉，直到前几天自己动手写了canvas画图小程序，那成就感满
Canvas知识点汇总
weixin_30602505的博客
08-29 110
本文主要记录Canvas基础知识汇总。 1、Canvas定义 <canvas> 元素是HTML5中的新元素，通过它可以在网页中绘制出所需的图形。<canvas>标签只是图形的容器，真正绘制图形需要使用脚本来完成。通过使用Canvas可以绘制路径,图形、字符以及添加图像。可以做出非常炫酷的各种特效效果。 兼容性：ie9+ 2、Canvas基本使用 2.1 创建画布和对象 ...
canvas基础知识点总结
冰雪为融的博客
03-29 690
学了两天的canvas了，整理一下所学的知识，总结到一起，加深一下对canvas的理解。嗯、就这样canvas：负责在页面中设定一个区域，然后就可以通过js动态的在这个区域中绘制图形canvas基本用法：要使用canvas，必须先设置width和height属性，指定可以绘图的区域大小。（如果不设置，默认大小是width:300px; height:150px;）一般的写法是直接写在行间，也可以写...
前端之Canvas知识点罗列（代码）
weixin_42896310的博客
05-30 243
Document //矩形的绘制 /* ctx.moveTo(100,100) ctx.lineTo(300,100) ctx.lineTo(300,300) ctx.lineTo(100,300) ctx.lineTo(100,100) ctx.stroke() */ //平行线 /* ctx.moveTo(100,100) ctx.line...
识别cavans中的横坐标间距
qq_36057956的博客
06-03 121
识别cavans中的横坐标间距
canvas设置空心文字（图文示例）
最新发布
大剑师兰特的GIS世界
01-07 1262
如何使用canvas设置空心文字呢？canvas内置了一个设置空心文字的方法，使用ctx.strokeText即可。在之前的文章中，我们谈到[设置实心的文字](https://blog.csdn.net/cuclife/article/details/135370176)。 文字的填充色使用fillStyle，文字的边框颜色使用strokeStyle。文字的大小和文字使用ctx.font来做设置。
Canvas 鼠标点击生成小圆点
08-10
下面将详细介绍这个过程，以及涉及到的相关技术点。 首先，我们需要在HTML文档中创建一个`<canvas>`元素，设置其宽高，并通过JavaScript获取到这个元素的引用，以便进行后续的绘图操作： ```html <canvas id=...
canvas像素点操作之视频绿幕抠图
09-22
综上所述，canvas像素点操作的视频绿幕抠图技术涉及到多种图像处理的知识，包括像素操作、图像数据结构、颜色空间转换等。在实现上，需要编写相应的JavaScript代码来操作canvas元素，并利用HTML5 Canvas API中的各种...
1.15 canvas小结之canvas知识点与案例总结｜倒计时粒子效果｜Canvas图形、动画、游戏开发从入门到精通全系列课程
08-31
1.15_canvas小结之canvas知识点与案例总结｜倒计时粒子效果｜Canvas图形、动画、游戏开发从入门到精通全系列课程
canvas知识总结
08-31
以下是关于Canvas的一些核心知识点： 1. **基础知识** - `context.fill()`：这个方法用于填充已经定义的路径或形状。一旦调用`fill()`，所有在`beginPath()`和`closePath()`之间的路径都将被填充。 - `context....
canvas在画布上创建空心线条的文字
努力中的小曾
08-02 1186
canvas在画布上创建空心线条的文字 直接上代码了!! html代码: <!DOCTYPE html> <html> <head> <title>在画布上创建空心线条的文字</title> </head> <body> <p> <input type="bu...
HTML canvas系列-绘制空心文本（7）
木梓油
05-22 886
HTML canvas系列-绘制空心文本（7）1、方法2、属性3、示例 -绘制文本 1、方法 strokeText(text,x,y) 参数 说明 text 文本 x 开始的x坐标 y 开始的y坐标 2、属性 font 字体 “bold 40px 宋体”; 样式有 normal, italic, or bold，默认是normal lineWidth 线框 strokeStyle字体颜色 3、示例 -绘制文本 <!DOCTYPE html> <ht
HTML5---Canvas-画线，空心图，矩形，文字，三角形，旋转图片
Damys
08-20 9086
HTML5，Canvas-画线，空心图，矩形，文字，三角形，旋转图片
JS如何获取数组中的最大值
weixin_45595621的博客
05-15 4174
//获取数组中最大值 var nums=[5,13,20,18,32] //声明变量用于保存最大值，吧第一个元素作为最大值 //在比较的时候可以从第二个元素开始比较 var s=nums[0]; //遍历数组，得到每个元素 for(var i=0;i<nums.length;i++){ //每个元素 nums[i] //如果s小于任意一个元素，则把该元素放入到s if(s<nums[i]){ s=nums[i]; } } ...
HTML5绘制实心的文本
牛栏山矿泉水
11-29 160
HTML5绘制实心的文本 1、设计源码 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;HTML5绘制实心的文本&lt;/title&gt; &lt;script type="text/javascript"&gt; fu
HTML5绘制空心的文本
牛栏山矿泉水
11-29 208
HTML5绘制空心的文本 1、设计源码 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;HTML5绘制空心的文本&lt;/title&gt; &lt;script type="text/javascript"&gt;
HTML canvas系列-绘制实心文本（6）
木梓油
05-21 497
HTML canvas系列-绘制实心文本（6）1、方法2、属性3、示例 -绘制文本 1、方法 fillText(text,x,y) 参数 说明 text 文本 x 开始的x坐标 y 开始的y坐标 2、属性 font 字体 “bold 40px 宋体”; 样式有 normal, italic, or bold，默认是normal fillStyle 字体颜色 3、示例 -绘制文本 <!DOCTYPE html> <html> <head
canvas-画圆心的算法
weixin_30662849的博客
01-14 799
公式为x=16sin~3t,y=(13cost-5cos2t-2cos3t-cos4t) x+r(16Math.pow(Math.sin(t),3)) y-r(13Math.cos(t)-5Math.cos(2t)-2Math.cos(3t)-Math.cos(4*t)); x,y坐标的圆心，t弧度 把y轴计算的减号改成加号圆心就会倒转 转载于:https://www.cnblogs...
html中Canvas知识点
05-20
以下是 Canvas 的一些知识点： 1. 创建 Canvas 元素 ```html <canvas id="myCanvas"></canvas> ``` 2. 获取 Canvas 元素 ```javascript var canvas = document.getElementById("myCanvas"); ``` 3. 设置 Canvas...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值