canvas学习记录(一)

canvas学习(一)

1.前言

        公司需要做个转盘抽奖,以前用js 写过一个 转盘 ,但是是仅仅是转动背景图,不能根据产品数量自定义,所以改用canvas, 学习地址 廖雪峰 还有 https://blog.csdn.net/u012468376/article/details/73350998 以及 mdn canvas 教程

2.笔记

        2.1 

                canvas如果不给 宽高属性 默认 300px 跟 150px

              

                而查看文章的时候,作者提醒尽量不要用css来写宽高,貌似是因为canvas有两个大小,一个是元素本身大小,一个是绘图表面大小, 标签本身宽高属性,两个都更改了,而css设置并只改变了元素大小,但未改变绘图表面大小,换句话说,就是css设置只不过是拉伸了画布,而画布实际大小还是300 150;

                

    <style>
        .aa{
            width: 100%;
            height: 100%;
        }
    </style>
    <div style="width: 1000px;height: 800px;">
        <!-- width="1000px" height="800px" -->
        <canvas  id="test" class="aa">
            
        </canvas>
    </div>
    <script>
            var test = document.getElementById("test");
            var ctx = test.getContext('2d');
            ctx.fillRect (10, 10, 55, 50);
            ctx.fillRect (100, 50, 55, 50);
            ctx.fillRect (150, 100, 55, 50);
            ctx.fillRect (200, 150, 55, 50);      
    </script>

        效果图

        

        可以明显看到  我实际绘制得图形 是 55 50 而 用css写后 明显 变形了

        

 <div style="width: 1000px;height: 800px;">
       
        <canvas  id="test"  width="1000px" height="800px">
            
        </canvas>
    </div>

        这次用标签得width height 

        

     恢复了正常大小

     所以如果使用canvas时 尽量要使用 标签原本得属性,而不是要用css区控制, 直接用js 获取父容器得宽高这样可以避免这个问题.

                 

        2.2

                canvas ---绘制矩形, x距离x轴的距离,  y距离y轴的距离, width宽, height高

                fillRect(x,y,width,height) 实心的     

                strockRect(x,y,width,height) 空心的(只有个border)

                clearRect(x,y,width,height) 清除

        2.3

                x距离x轴的距离,  y距离y轴的距离(圆心) r 半径, startAngle 开始弧度 endAngle 结束弧度 

  anticlockwise 顺逆时针 前三个没什么说的 startAngle 基本用 math.pi =π=180°  math.pi/2 可以理解为90°

  anticlockwise false 代表逆时针 true 代表顺时针

                arc(x,y,r,startAngle,endAngle,anticlockwise)

        2.4

                path