canvas-第二天02部分

最新推荐文章于 2024-04-26 15:43:03 发布

yi-giao-wo-li-giao

最新推荐文章于 2024-04-26 15:43:03 发布

阅读量95

点赞数

分类专栏： Canvas

本文链接：https://blog.csdn.net/qq_31799003/article/details/85330649

版权

Canvas 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.绘制文字

        var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");

        /**
         * 设置文字的属性*
         * pencil.font = css 语法
         * 注意：这里设置字体大小必须带单位， 单位必须支持css的所有表示方式
         * 注意：单独设置字体大小不会生效，必须要加一个额外的属性样式
         */
        pencil.font = '2rem 微软雅黑';

        /**
         * 绘制描边文字：
         * pencil.strokeText(文字， 参考X轴坐标， 参考y轴坐标， 限制文字的最大长度（可选）)*/
        pencil.strokeText("嘻嘻嘻嘻嘻嘻嘻嘻", 100, 100);

        /**
         * 绘制填充文字：
         * pencil.fillText(文字， 参考x轴坐标， 参考y轴坐标，限制文字的最大长度（可选）)*/
        pencil.fillText("哈哈哈哈哈哈哈哈", 100, 200);

        /**绘制文字的参考点*/
        pencil.beginPath();

        /**
         * method:  arc()
         * The arc() method creates a circular arc centered at (x, y) with a radius of radius.
         * The path starts at startAngle and ends at endAngle,
         * and travels in the direction given by anticlockwise (defaulting to clockwise).
         *
         *
         * parameters: 100, y:200, startAngle:4, endAngle:0, anticlockwise
         * */
        pencil.arc(100, 100, 4, 0, Math.PI*2);
        pencil.fill();

        pencil.beginPath();
        pencil.arc(100, 200, 4, 0, Math.PI*2);
        pencil.fill();

2.设置文字对齐方式

            var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");

        pencil.font = '20px 微软雅黑';

        /**
         * 设置文字的水平对齐方式：
         * pencil.textAlign = ‘left, center, right,*/

        /**
         * 设置文字垂直对齐方式：
         * pencil.textBaseline = 'top, middle, bottom, alphabetic, hanging, ideographic*/
        pencil.strokeStyle="red";
        pencil.moveTo(100,100);
        pencil.lineTo(500,100);
        pencil.stroke();

        pencil.textAlign = 'left';

        pencil.textBaseline = 'top';
        pencil.fillText("top", 100, 100);

        pencil.textBaseline = 'middle';
        pencil.fillText("middle", 130, 100);

        pencil.textBaseline = 'bottom';
        pencil.fillText("bottom", 200, 100);

        pencil.textBaseline = 'alphabetic';
        pencil.fillText("alphabetic", 280, 100);

        pencil.textBaseline = 'hanging';
        pencil.fillText("hanging", 350, 100);

        pencil.textBaseline = 'ideographic';
        pencil.fillText("ideographic", 400, 100);

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

3.饼图的升级

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="demoCanvas" width="500" height="500"  >
        <p>你的浏览器不支持Canvas</p>
    </canvas>
    <script src="./script/pieBetter.js" ></script>
    <script>
        var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");

        var pie = new Pie(200, 200, 80, [
            {
                val:10,
                msg:'米饭'
            },
            {
                val: 30,
                msg: '面条'
            },
            {
                val: 50,
                msg: '馒头'
            },
            {
                val: 50,
                msg: '豆腐脑'
            },
            {
                val: 50,
                msg: '饺子'
            },
            {
                val: 90,
                msg: '汤圆'
            },
        ]);
        pie.draw();
//        pie.eatPie();
    </script>
</body>
</html>

js代码：

/**
 * Created by  on 2018/12/28.
 */
(function (w) {

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

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

    /**
     * constructor: { pie } 饼图构造函数
     * param { x:number } 圆心x轴坐标
     * param { y:number } 圆心y轴坐标
     * param { r:number } 圆半径
     * param { data:array } 绘制饼图所需的数据
     */
    function Pie( x, y, r, data) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.data = data;
        this.colors = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'];
    }
    //给原型扩充方法
    extend(Pie.prototype, {
        draw: function () {
            var self = this;

            //数据的总和
            var num = 0;
            this.data.forEach(function(obj){
                num += obj.val;
            });
            //一个数据值所占用的角度
            var baseAngle = 360 / num;

            //假设已开始就绘制了一个起初为零，结束为零的扇形
            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(angleToRidian(lineAngle));
                lineY = self.y + (self.r + 20) * Math.sin(angleToRidian(lineAngle));

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

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

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

    });
    //把构造函数暴露到全局
    w.Pie = Pie;

}(window));

4.圆上画一点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="demoCanvas" width="500" height="500"  >
        <p>你的浏览器不支持Canvas</p>
    </canvas>
    <script src="./script/pieBetter.js" ></script>
    <script>
        var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");

        function angleToRadian(angle) {
            return Math.PI / 180 * angle;
        }

        var x = 200, y = 200, r = 90, pointAngle = 60;
        pencil.arc(x, y, r, 0, Math.PI*2);
        pencil.stroke();
        /**
         * 在圆上画一点：
         * 1.求点坐标
         * 2.x = 圆心x +r * Math.cos(angleToRadian(pointAngle))
         * 3.y = 圆心y +r * Math.sin(angleToRadian(pointAngle))
         * */
        pencil.beginPath();
        pencil.arc(x + r * Math.cos(angleToRadian(pointAngle)), y + r * Math.sin(angleToRadian(pointAngle)),6,0, Math.PI*2);
        pencil.fill();
    </script>
</body>
</html>

yi-giao-wo-li-giao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas-第二天02部分

1.绘制文字 var canvas = document.getElementById("demoCanvas"); var pencil = canvas.getContext("2d"); /** * 设置文字的属性* * pencil.font = css 语法 * 注意：这里设置...
复制链接

扫一扫

专栏目录