canvas图形操作/requestAnimationFrame

canvas图形操作

    //核心代码
        //canvas标签,宽高必须写在行内
        <canvas id = 'c1' width='800' height='800'></canvas>;
        //js代码
        window.onload = function (){
            //获取页面上的canvas标签
            let oC = document.getElementById('c1');
            //获取图形上下文接口:包含所需属性、函数
            let gd = oC.getContext('2d'); 
            //路径操作 选中一个范围
            gd.beginPath();//清除之前开启的路径,防止两次路径重复渲染
            gd.moveTo(470,81);//起点
            gd.lineTo(778,236);//连接
            gd.lineTo(532,411);//连接
            gd.lineTo(312,259);//连接
            gd.closePath();//系统自动闭合,无需手动处理闭合路径,或者使用gd.lineTo(470,81);//手动闭合路径;
            
            gd.react();//画矩形,参数x轴距离,y轴距离,宽,高
            gd.arc();//画圆,参数为：圆心x,y,圆半径,弧度开始,弧度结束,是否逆时针画图(true,false)
            //react、arc需配合以下函数进行操作
            gd.stroke();//对选取进行描边,默认黑
            gd.fill();//对选取进行填充,默认黑
            gd.lineWidth=10;//设置边线宽度为10
            gd.strokeStyle='red';//设置边线的颜色;
            gd.fillStyle='red';//设置填充的颜色;
            gd.clearRect();//清除一个矩形线框

            //react、arc也可以直接使用以下函数
            gd.strokeRect();//直接画一个矩形线框
            gd.fillRect();//直接填充一个矩形线框
            gd.lineWidth=10;//设置边线宽度为10
            gd.strokeStyle='red';//设置边线的颜色;
            gd.fillStyle='red';//设置填充的颜色;
            gd.clearRect();//清除一个矩形线框
        }
    一切路径操作开始之前,需要先使用beginPath()用来清除之前开启的路径,防止两   次路径重复渲染;

    //canvas 不保存图形,不存在事件,渲染速度极快 
    //画弧度时需要将角度与弧度进行转换
        function d2a(n){
            return n*Math.PI/180;
        }
        function a2d(n){
            return n*180/Math.PI;
        }
        gd.arc(400,500,d2a(0),d2a(360),false);//画60度弧度
    //canvas处理字体
        gd.font='10px 宋体'
        gd.strokeText('测试文字',100,100);//描边,此处指的是文字左下角坐标
        gd.fillText('测试文字',100,100);//填充实体,此处指的是文字左下角坐标
    //canvas的transform
        1.rotate
        2.translate
        3.scale
    需要把gd.ratate()等transform所有操作要写在画图之前;
    当transform操作组合使用时,需要倒序写;
    gd.save();//制作动画时，使用save()函数来保存当前图像状态
        gd.translate(200,175)//平移
        gd.ratate(30*Math.PI/180);//先转在画图
        gd.strokeRect(-100,-75,100,100);//图像是转动整个canvas左上角,所以将图像中心放到左上角，然后使用平移移动到想要的位置。
    gd.restore();//将之前保存的状态恢复

扩展

requestAnimationFrame();
    逐帧执行,可以代替定时器,比定时器更好用;
    实例：
    requestAnimationFrame(next);
    function next(){
        alert('测试');
        requestAnimationFrame(next);
    }
ev.offsetX,ev.offsetY;
    获取鼠标在当前物体上的坐标点;兼容性canvas的浏览器就兼容该属性