网站首页 » 前端开发 » JavaScript » Canvas 画箭头
上一篇:
下一篇:

Canvas 画箭头

这篇文章也比较简单,用 Canvas 来画个箭头,可以从简单的例子中学到或者巩固对 Canvas 的知识点。什么东西都不要觉得好像一眼就能看到明白了,自认为码一篇是没必要的,但我个人觉得看一篇别人的代码,不如自己码一篇代码印象更加深刻。作为敲码的人,万万不能眼高手低。

HTML 代码(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas 画箭头 - 云库前端</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    var icanvas = document.getElementById("canvas");
    var ctx = icanvas.getContext("2d");
    var cw = icanvas.width = 800;
    var ch = icanvas.height = 600;
    /**
    * {
    *   cw:canvas 宽,
    *   ch:canvas 高,
    *   w:箭头宽,
    *   h:箭头高,
    *   fillStyle:填充色
    *   strokeStyle:描边色
    * }
    * @type {Arrow}
    */
    var arrow = new Arrow({
        cw:cw,
        ch:ch,
        w:200,
        h:60
    });
    arrow.render(ctx);
</script>
</body>
</html>
JavaScript(index.js)
/*
* @Author: 朝夕熊
* @Date:   2017-10-13 20:51:20
* @Last Modified by:   朝夕熊
* @Last Modified time: 2017-10-13 22:53:12
*/
function Arrow(options){
    var defaults = { // 默认配置
        cw : 800,
        ch : 600,
        w : 300,
        h : 80,
        fillStyle : "rgba(124,205,123,1)",
        strokeStyle: "rgba(0,0,0,0)"
    };
    // 合并配置项
    var settings = Object.assign(defaults,options); // assign() 方法是 ES6 里的浅拷贝
    this.x = 0;
    this.y = 0;
    this.cw = settings.cw;
    this.ch = settings.ch;
    this.w = settings.w;
    this.h = settings.h;
    this.fillStyle = settings.fillStyle;
    this.strokeStyle = settings.strokeStyle;
}
Arrow.prototype.render = function(ctx){
    /**
     *    渲染箭头
     */
    ctx.save(); // canvas 保存状态
    ctx.fillStyle = this.fillStyle;
    ctx.strokeStyle = this.strokeStyle;
    ctx.translate(this.cw/2,this.ch/2); // 将会话环境移动到画面中间
    this.createPath(ctx); // 创建箭头路径
    ctx.fill(); // 填充颜
    ctx.stroke(); // 描边
    ctx.restore(); // 恢复 canvas 状态
}
Arrow.prototype.createPath = function(ctx){
    /**
     *    描点连成路径
     */
    ctx.beginPath();
    ctx.moveTo(-this.w/2,-this.h/2);
    ctx.lineTo(this.w/10,-this.h/2);
    ctx.lineTo(this.w/10,-this.h);
    ctx.lineTo(this.w/2,0);
    ctx.lineTo(this.w/10,this.h);
    ctx.lineTo(this.w/10,this.h/2);
    ctx.lineTo(-this.w/2,this.h/2);
    ctx.closePath();
}

createPath() 方法中的描点中的坐标可以参考下面这个图(来源于网络):

Canvas 画箭头

正如你所看到的,本例子封装了一个画箭头的方法。使用时可以通过 new 关键字来进行创建箭头对象。这个 new 一个新对象时,你可以给这个对象传一些参数。参数为可选,不传时,会使用默认的值。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/canvas-draw-arrow/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END