canvas+js+面向对象的圆形封装

效果：

Circle.js

/*
    1、 封装属性：  x， y  r，  fillStyle  strokeStyle    opacity
    2、render
*/
function Circle(option) {
    this._init(option);
}
Circle.prototype = {
    _init : function (option) {
        this.x = option.x || 0;   //x ,y 坐标
        this.y = option.y || 0;
        this.r = option.r || 0;      // 圆的半径
        // 设置圆形的透明度
        this.opacity = option.opacity === 0 ? 0 : option.opacity || 1;
        this.strokeStyle = option.strokeStyle || 'red';//划线颜色
        this.fillStyle = option.fillStyle || 'blue';//填充颜色
    },
    render : function (ctx) {
        ctx.save();// 把当前的上下文的状态保存一下
        ctx.beginPath();//开始一个新的路径
        ctx.translate(this.x, this.y);  //把整个画布进行位移,让图片以新画布原点为原点
        ctx.globalAlpha = this.opacity;//设置透明度
        //给 ctx规划一个路径。注意：规划的路径会一直保存。所以
        //最好在每次绘制圆形的时候beginPath一下标志一个新的路径。
        ctx.arc(this.x,this.y,this.r,0,360);
        ctx.fillStyle = this.fillStyle;
        ctx.fill();

        ctx.strokeStyle = this.strokeStyle;
        ctx.stroke();
        ctx.restore();//还原绘制的状态
    }
}

index,html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象版本的圆形</title>
    <script src="js/Circle.js"></script>
</head>
<body>

<div id="container">
    <canvas id="cavsElem1">
        你的浏览器不支持canvas，请升级浏览器
    </canvas>

    <canvas id="cavsElem2">
        你的浏览器不支持canvas，请升级浏览器
    </canvas>
</div>
<img src="" id="imgId" alt="">
<script>
    (function(){
        var canvas1 = document.querySelector( '#cavsElem1' );
        var canvas2 = document.querySelector( '#cavsElem2' );
        var ctx1 = canvas1.getContext( '2d' );
        var ctx2 = canvas2.getContext( '2d' );

        canvas1.width = 600;
        canvas1.height = 600;
        canvas1.style.border = "1px solid #000";

        canvas2.width = 600;
        canvas2.height = 600;
        canvas2.style.border = "1px solid #000";

        //创建圆形
        var circle = new Circle({
            x:100,
            y:100,
            r:30,
            opacity:.6,
            fillStyle: 'purple',    //填充的样式
            strokeStyle: 'yellow'
        });

        //渲染圆形
        circle.render(ctx1);


        setInterval(function() {
            ctx1.clearRect( 0,  0 , canvas1.width, canvas1.height);
            circle.x+=10;
            circle.render(ctx1);
            ctx2.drawImage(canvas1, 0, 0);
        }, 100)

    }());
</script>
</body>
</html>

posted on 2018-11-30 11:01 xxcxxc 阅读(393) 评论(0) 编辑收藏举报