Canvas绘图接口(曲线)

最新推荐文章于 2024-08-16 15:33:06 发布

hyxx

最新推荐文章于 2024-08-16 15:33:06 发布

阅读量1.4k

点赞数

分类专栏： web前端文章标签： canvas

本文链接：https://blog.csdn.net/heyan1106yan/article/details/52948568

版权

这篇博客详细介绍了如何使用Canvas进行曲线绘制，包括arc()函数绘制弧线、圆角矩形、2048游戏棋盘的实现、arcTo()绘制弧线以及arc和arcTo绘制弯月。此外，还探讨了二次和三次贝塞尔曲线的用法，提供了调试网址以帮助理解这些曲线的绘制效果。

摘要由CSDN通过智能技术生成

绘制一段弧线

使用arc()绘制弧线

这里写图片描述

context.arc(
    centerx,centery,radius,//圆心坐标，圆弧的半径
    startingAngle,endingAngle,//开始角度，结束角度
    anticlockwise=false//可选，是都是逆时针的绘制，默认false顺时针绘制
)
<script type="text/javascript">
        /*绘制一段弧线*/
        var canvas = document.getElementById('canvas');

        canvas.width = 800;
        canvas.height = 800;

        var context = canvas.getContext('2d');
        /**
         * [anticlockwise description]
         * @type {[type]}
         */

        context.lineWidth = 5;
        context.strokeStyle = '#aaa';

        for(var i = 0 ; i < 10 ; i++){
            context.beginPath();
            context.arc(50 + i*100,60,40,0,2*Math.PI*(i+1)/10);
            context.stroke();
        }
    </script>

绘制一个圆角矩形

这里写图片描述

/*绘制一个圆角矩形*/
        /**
         * [drawRoundRect 绘制一个圆角矩形]
         * @param  {[type]} cxt    [description]
         * @param  {[type]} x      [左上角的坐标]
         * @param  {[type]} y      [左上角的坐标]
         * @param  {[type]} width  [圆角矩形的宽]
         * @param  {[type]} height [圆角矩形的高]
         * @param  {[type]} radius [圆角矩形的半径]
         * @return {[type]}        [description]
         */
        function drawRoundRect(cxt,x,y,width,height,radius){
            //这里进行判断，防止半径过大，这样矩形就会变形
            if(2*radius > width || 2*radius > height){
                return;
            }
            cxt.save();
            cxt.translate(x,y);
            pathRoundRect(cxt,wi