canvas小记(1)

1. canvas自身是带的有width 和height的，写在标签属性style里面和外面是不一样的
2. 在进行canvas路径操作的时候，一定要先清除前面的路径（obj.beginPath()），否则前面的路径会受到后面的影响。
3. obj.beginPath()和obj.closePath()两个没有关系，obj.beginPath()清除之前的路径；obj.closePath()闭合当前路径
4. canvas画线操作：moveTo()、lineTo()、beginPath()、closePath()、stroke()、fill()
5. canvas画矩形操作：rect()、strokeRect()、fillRect()、clearRect()
6. canvas 做自适应可以用window.onresize
7. canvas 的描边扩展的时候既向内又向外扩展
8. canvas不会保存图形，所以图形画了就不能修改，如果要修改，只能删了重画；canvas画的图形没有事件，canvas对象本身有事件

canvas里的图形向右移动实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background: gray;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function () {
            let c1 = document.getElementsByTagName('canvas')[0];
            let left=100;
            let gd = c1.getContext('2d');
            requestAnimationFrame(next);

            function next(){
                gd.clearRect(0,0,c1.width,c1.height);
                left+=5;
                gd.strokeRect(left,100,200,200);

                requestAnimationFrame(next);
            }
        }
    </script>
</head>
<body>
    <canvas width="800" height="600" style="background:white;"></canvas>
</body>
</html>

这段代码是在canvas里有一个不断向右移动的矩形。
requestAnimationFrame函数是请求一个动画帧

canvas里鼠标移入移出矩形变色实例：

还是上面的canvas，js代码如下

window.onload = function () {
            let c1 = document.getElementsByTagName('canvas')[0];
            let gd = c1.getContext('2d');  
            gd.strokeRect(100,100,200,200);
            c1.onmousemove=function(ev){
                let l=100,r=l+200,t=100,b=t+200;
                let x=ev.offsetX,y=ev.offsetY;
                //let x=ev.clientX-c1.offsetLeft,y=ev.clientY-c1.offsetTop;
                //这里的鼠标坐标x，y可以有两种写法
                gd.clearRect(0,0,c1.width,c1.height);
                if(x>=l&&x<=r&&y>=t&&y<=b){
                    gd.strokeStyle='red';
                }else{
                    gd.strokeStyle='black';
                }
                gd.strokeRect(100,100,200,200);
            }
        }

9. canvas画圆操作arc(cx,cy,r,startAng,endAng,false),cx、cy表示圆心坐标，r表示半径，startAng、endAng表示起始角度和结束角度（弧度制），最后一个参数false表示是否逆时针。

canvas里鼠标移入移出圆形变色实例：

原理：如何判断鼠标是否在圆内？只要判断鼠标到圆心的距离是否大于半径，就可以检测是否在圆内

还是上面的canvas，js代码如下

window.onload = function () {
            let c1 = document.getElementsByTagName('canvas')[0];
            let gd = c1.getContext('2d');
            let cx=200,cy=200,r=150;

            function d2a(n){//角度转弧度
                return n*Math.PI/180;
            }
            function a2d(n){//弧度转角度
                return n*180/Math.PI;
            }
            
            gd.arc(cx,cy,r,d2a(0),d2a(360),false);
            gd.stroke();
     
            c1.onmousemove=function(ev){
                let x=ev.offsetX,y=ev.offsetY;//鼠标到画布的距离，左上
                let dis=Math.sqrt(Math.pow(x-cx,2)+Math.pow(y-cy,2));//鼠标到圆心的距离
                gd.clearRect(0,0,c1.width,c1.height);

                if(dis<=r){//如果鼠标到圆心的距离小于半径，说明在圆内
                    gd.strokeStyle='red';
                }
                else{//否则在圆外
                    gd.strokeStyle='black';
                }
                gd.beginPath();
                gd.arc(cx,cy,r,d2a(0),d2a(360),false);
                gd.stroke();
            }

canvas小记(1)

canvas里的图形向右移动实例：

canvas里鼠标移入移出矩形变色实例：

canvas里鼠标移入移出圆形变色实例：

原理：如何判断鼠标是否在圆内？只要判断鼠标到圆心的距离是否大于半径，就可以检测是否在圆内

逸轩

引用和评论

promise和generator

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号