网站首页 » 前端开发 » HTML5 » 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;
    /**
    * {
    *   x:圆心 x 轴坐标,
    *   y:圆心 y 轴坐标,
    *   r:圆半径,
    *   fillStyle:填充色,
    *   strokeStyle:描边色
    * }
    * @type {Ball}
    */
    var ball = new Ball({
        x:cw/2,
        y:ch/2,
        r:60
    });
    ball.render(ctx);
</script>
</body>
</html>
JavaScript 代码(index.js)
/*
* @Author: 朝夕熊
* @Date:   2017-10-15 20:51:20
* @Last Modified by:   朝夕熊
* @Last Modified time: 2017-10-15 21:38:35
*/
function Ball(options){
    var defaults = { // 默认配置
        x:0,
        y:0,
        r:25,
        fillStyle : "rgba(124,205,123,1)",
        strokeStyle: "rgba(0,0,0,0)"
    };
    // 合并配置项
    var settings = Object.assign(defaults,options); // assign() 方法是 ES6 里的浅拷贝
    this.x = settings.x;
    this.y = settings.y;
    this.r = settings.r;
    this.fillStyle = settings.fillStyle;
    this.strokeStyle = settings.strokeStyle;
}
Ball.prototype.render = function(ctx){
    /**
     *    渲染圆
     */
    ctx.save(); // canvas 保存状态
    ctx.fillStyle = this.fillStyle;
    ctx.strokeStyle = this.strokeStyle;
    ctx.translate(this.x,this.y);
    this.createPath(ctx); // 创建圆
    ctx.fill(); // 填充颜
    ctx.stroke(); // 描边
    ctx.restore(); // 恢复 canvas 状态
}
Ball.prototype.createPath = function(ctx){
    ctx.beginPath();
    ctx.arc(0,0,this.r,0,2*Math.PI);
    ctx.closePath();
}

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

你可以修改 JavaScript 文件里面的代码实现更多的效果,比如:只作左移运动、只作右移运动、自由落体运动等等。没有做不到,只有想不到,试试你就知道。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END