canvas坐标体系+canvas画直线、矩形、圆

canvas默认宽高是300*150px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas">您的浏览器不支持canvas</canvas>
</body>
</html>

操作canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.moveTo(0,0);
        ctx.lineTo(100,100);
        ctx.stroke();
    </script>
</body>
</html>

修改canvas尺寸

<canvas class="canvas" id="canvas" width="100" height="100">您的浏览器不支持canvas</canvas>

此处有坑：

如果不直接在canvas上定义宽高，而是在css中定义

<canvas class="canvas" id="canvas">您的浏览器不支持canvas</canvas>

.canvas{border:1px solid pink;width:100px;height:100px;}

可以看到跟刚才的效果是不一样的！！！

打印canvas的宽高可以发现，依然是300*150，也就是说在css里设置的宽高并不是canvas的实际宽高

console.log(canvas.width+","+canvas.height);

具体操作过程就是：现在300*150的画布上进行绘图，等绘制完成后再按照100*100的比例进行缩放

因此，想要设置canvas的宽高，只能在html上直接写，或者在js里定义

canvas.width=100;
        canvas.height=100;
        console.log(canvas.width+","+canvas.height);

以下是通过两种方式设置的样式的对比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;width:200px;height:200px;}
        .canvas2{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas">您的浏览器不支持canvas</canvas>
    <canvas class="canvas2" id="canvas2">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境
        canvas.width=100;
        canvas.height=100;
        console.log(canvas.width+","+canvas.height);
        ctx.moveTo(0,0);
        ctx.lineTo(100,100);
        ctx.stroke();

        var canvas2=document.getElementById("canvas2");
        var ctx2=canvas2.getContext("2d");//上下文，绘图环境
        canvas2.width=200;
        canvas2.height=200;
        console.log(canvas2.width+","+canvas2.height);
        ctx2.moveTo(0,0);
        ctx2.lineTo(200,200);
        ctx2.stroke();
    </script>
</body>
</html>

canvas画直线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.moveTo(0,0);//起点
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);//在内存中绘制
        ctx.stroke();//真正绘制
    </script>
</body>
</html>

以下又有新坑：

如果此时想要复制一条线，使用以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.moveTo(0,0);//起点
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);//在内存中绘制
        ctx.stroke();//绘制内存中存储的第一段线条

        ctx.moveTo(100,0);//起点
        ctx.lineTo(200,100);
        ctx.lineTo(200,200);//在内存中绘制
        ctx.stroke();//绘制内存中存储的第一段和第二段线条
    </script>
</body>
</html>

肉眼可见第一条线颜色比第二条线深

其实是因为第一条线被绘制了两次

所以正确的打开方式应该是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.moveTo(0,0);//起点
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);//在内存中绘制

        ctx.moveTo(100,0);//起点
        ctx.lineTo(200,100);
        ctx.lineTo(200,200);//在内存中绘制
        ctx.stroke();//绘制内存中存储的第一段和第二段线条
    </script>
</body>
</html>

一个stroke即可

如果坚持要分两次单独绘制的话，就需要以下方案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.moveTo(0,0);//起点
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);//在内存中绘制
        ctx.stroke();//绘制内存中存储的第一段线条

        ctx.beginPath();//会把之前内存中的线条清空
        ctx.moveTo(100,0);//起点
        ctx.lineTo(200,100);
        ctx.lineTo(200,200);//在内存中绘制
        ctx.stroke();//绘制内存中存储的第二段线条
    </script>
</body>
</html>

canvas画圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        //.arc绘制()圆弧
        //第一个参数是圆心位置，第二个参数是半径
        //第三和四参数分别代表起始弧度和终止弧度，完整的圆就是0-2π
        //最后一个参数，true代表逆时针，false代表顺时针
        ctx.arc(100,100,50,0,2*Math.PI,true);
        ctx.strokeStyle="#abcdef";//设置绘制颜色
        ctx.stroke();
    </script>
</body>
</html>

绘制矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        //.strokeRect绘制矩形
        //第一个参数是矩形左上角位置 300,100
        //第二个参数是矩形的宽高 200,100
        ctx.strokeRect(300,100,200,100);
    </script>
</body>
</html>

strokeRect是封装好的，因此不需要再次stroke即可绘制

闭合路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.moveTo(0,0);//起点
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);//在内存中绘制
        ctx.closePath();//自动闭合路径
        ctx.stroke();//绘制
        
    </script>
</body>
</html>

填充与描边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.moveTo(0,0);//起点
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);//在内存中绘制
        ctx.closePath();//自动闭合路径
        ctx.fill();//填充区域
        
    </script>
</body>
</html>

fill同时也能闭合路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.moveTo(0,0);//起点
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);//在内存中绘制
        ctx.closePath();//自动闭合路径

        ctx.lineWidth=5;//设置线条粗细
        ctx.strokeStyle="orange";//描边颜色
        ctx.stroke();

        ctx.fillStyle="#abcdef";//填充颜色
        ctx.fill();//填充
        
    </script>
</body>
</html>

当使用半透明的填充色时，可以看到填充是沿着路径开始的，因此会有一半的线条宽度与填充色重合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.moveTo(0,0);//起点
        ctx.lineTo(100,100);
        ctx.lineTo(100,200);//在内存中绘制
        ctx.closePath();//自动闭合路径

        ctx.lineWidth=10;//设置线条粗细
        ctx.strokeStyle="orange";//描边颜色
        ctx.stroke();

        ctx.fillStyle="rgba(171,205,239,.5)";//填充颜色
        ctx.fill();//填充
        
    </script>
</body>
</html>

矩形的填充和描边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.lineWidth=10;//设置线条粗细
        ctx.strokeStyle="orange";//描边颜色
        ctx.fillStyle="rgba(171,205,239,.5)";//填充颜色

        ctx.strokeRect(100,200,100,100);//描边的矩形
        ctx.fillRect(300,200,100,100);//填充的矩形
    
    </script>
</body>
</html>

圆的填充和描边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        .canvas{border:1px solid pink;}
    </style>
</head>
<body>
    <canvas class="canvas" id="canvas" width="600" height="400">您的浏览器不支持canvas</canvas>

    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");//上下文，绘图环境

        ctx.lineWidth=10;//设置线条粗细
        ctx.strokeStyle="orange";//描边颜色
        ctx.fillStyle="rgba(171,205,239,.5)";//填充颜色

        ctx.arc(100,200,50,0,2*Math.PI,true);
        ctx.stroke();
        ctx.fill();
    
    </script>
</body>
</html>

相关阅读:
Mina入门：mina版之HelloWorld
Mina入门：Java NIO基础概念
 Activity与Service进行数据交互
 Android 6.0权限全面详细分析和解决方案
 查看Android系统是User模式还是Eng模式
 修改 Android 5.x 系统默认音量大小
 Android执行程序或脚本的方法
 Android Launcher 3 简单分析
 将Android系统源码导入ecplise
Scrum三大角色特点
原文地址：https://www.cnblogs.com/chenyingying0/p/12459805.html