canvas系列二：canvas中级篇

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

小公举plum

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

阅读量345

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/sinat_38328891/article/details/79698192

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

canvas系列二：canvas中级篇

一、绘制矩形

【总结】绘制矩形的几种方法

context对象.strokeRect
context对象.fillRect
context对象.rect
rect方法就是矩形路径，还需要使用fill或stroke才可以看到效果，因此一般使用strokeRect或fillRect直接可以看到结果。

【1】绘制矩形框

语法：
    context对象.strokeRect(x,y,width,height)

参数说明：
前两个参数表示绘制矩形的左上角的坐标，后两个参数表示这个矩形的宽高。
使用该方法不需要使用moveTo方法设置起始点也不需要调用stroke等绘画方法。
绘制的矩形支持strokeStyle设置颜色样式。

【2】绘制填充矩形

语法: 
    context对象.fillRect(x,y,width,height)

参数说明：
前两个参数表示绘制矩形的左上角的坐标，后两个参数表示这个矩形的宽高。
使用该方法不需要使用moveTo方法设置起始点也不需要调用stroke等绘画方法。
绘制的矩形支持fillStyle设置颜色样式。

【3】清除矩形区域

语法：
   context对象.clearRect(x,y,width,height)

参数说明：
参数 x, y 表示矩形区域左上角的坐标，width 与 height 表示矩形区域的宽高。
用于清除画布中的矩形区域的内容。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制矩形</title>
</head>
<body>
    <canvas id="canvas" width="800" height="800">你的浏览器还不支持canvas，赶紧换一个吧</canvas>
    <script type="text/javascript">
        //第一步、获取canvas对象
        var canvas = document.querySelector('#canvas');
        //第二步、获取上下文
        var ctx = canvas.getContext('2d');
        //第三步、绘制矩形
        ctx.strokeStyle = 'red';
        ctx.strokeRect(10,10,200,100);

        ctx.beginPath();
        ctx.fillStyle = 'blue';
        ctx.fillRect(300,300,200,100);

        ctx.clearRect(350,350,50,50);
    </script>
</body>
</html>

二、绘制圆

【1】绘制圆弧

语法：
    context对象.arc( x,y,radius,startAngle,endAngle,anticlockwise)
    context对象.arcTo()

参数描述：
前两个参数 x, y 表示绘制圆弧的圆心坐标。
参数 radius 表示圆弧半径，单位为弧度。
参数 startAngle 与 endAngle 表示开始到结束的角度. 角度以水平向右为 0 弧度，顺时针为正方向。
参数 anticlockwise 表示是否采用默认的正向角度，如果传入 true 表示逆指针为正。该参数可选。

使用arc绘图的时候,若没有设置moveTo，那么会从开始绘弧的地方作为起始点，若设置了moveTo,那么会连线该点与圆弧的起点。
如果使用stroke方法, 那么会从开始连线到圆弧的起始位置。如果是fill方法,会自动闭合路径填充。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制圆弧</title>
</head>
<body>
    <canvas id="canvas" width="1000" height="1000">你的浏览器还不支持canvas，赶紧换一个吧</canvas>
    <script type="text/javascript">
        //第一步、获取canvas对象
        var canvas = document.querySelector('#canvas');
        //第二步、获取上下文
        var ctx = canvas.getContext('2d');
        //第三步、绘制圆弧
        ctx.arc(300,300,100,Math.PI/2,Math.PI);
        ctx.stroke();
    </script>
</body>
</html>

【2】绘制扇形

绘制扇形的重点是需要设置起始位置为圆心点, 然后闭合路径即可。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制扇形</title>
</head>
<body>
    <canvas id="canvas" width="1000" height="1000">你的浏览器还不支持canvas，赶紧换一个吧</canvas>
    <script type="text/javascript">
        //第一步、获取canvas对象
        var canvas = document.querySelector('#canvas');
        //第二步、获取上下文
        var ctx = canvas.getContext('2d');
        //第三步、绘制扇形
        ctx.moveTo(300,300);
        ctx.arc(300,300,100,Math.PI/2,Math.PI);
        ctx.closePath();
        ctx.stroke();
    </script>
</body>
</html>

【3】绘制扇形

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制扇形动画</title>
</head>
<body>
    <canvas id="canvas" width="1000" height="1000">你的浏览器还不支持canvas，赶紧换一个吧</canvas>
    <script type="text/javascript">
        //第一步、获取canvas对象
        var canvas = document.querySelector('#canvas');
        //第二步、获取上下文
        var ctx = canvas.getContext('2d');

        ctx.fillStyle = 'blue';
        //第三步、绘制扇形动画
        var x = 500;
        var y = 500;
        var r = 100;
        var startAngle = -Math.PI/2;
        var angle = startAngle;

        var s = setInterval(function(){
            ctx.clearRect( 0, 0, canvas.width, canvas.height );
            angle += 0.1;
            if(angle >= Math.PI*3/2){
                clearInterval(s);
                angle = Math.PI * 3 / 2;
                console.log('动画绘制完成');
            }
            ctx.moveTo(x,y);
            ctx.arc(x,y,r,startAngle,angle);
            ctx.fill();
        },50);
    </script>
</body>
</html>

【4】绘制饼形图

绘制饼形图最大的特点是角度是叠加的。
开始从-Math.PI/2开始绘制,达到执行角x后,下一个区域从x开始绘制, 然后有到一个角y停下来。如此反复到 Math.PI * 3 / 2 结束。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制饼状图</title>
</head>
<body>
    <canvas id="canvas" width="1000" height="1000">你的浏览器还不支持canvas，赶紧换一个吧</canvas>
    <script type="text/javascript">
        //第一步、获取canvas对象
        var canvas = document.querySelector('#canvas');
        //第二步、获取上下文
        var ctx = canvas.getContext('2d');
        //第三步、绘制饼状图
        var x = 300;
        var y = 300;
        var r = 100;
        var start = -Math.PI/2;
        var step = Math.PI*2/3;
        var color = ['red','orange','yellow'];
        for(var i = 0;i < 3;i++){
            ctx.beginPath();
            ctx.moveTo(x,y);
            ctx.fillStyle = color[i];
            ctx.arc(x,y,r,start,start+=step);
            ctx.fill();
        }
    </script>
</body>
</html>