canvas的基本使用

1、canvas的定义

canvas 元素是HTML5中使用 JavaScript 在网页上绘制图像的

示例一：基本的创建以及使用canvas


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            canvas {
                margin: auto;
                background-color: aqua;
                /* canvas一般不在style中设置宽高，会造成放大或缩小 */
                /* width: 600px;
                height: 400px; */
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="600px" height="400px"></canvas>    
    </body>
    <script>
        //canvas默认宽高是300*150
        let myCanvas = document.querySelector('#myCanvas')
        //获取一个 绘制上下文
        let context = myCanvas.getContext('2d');
        //IE以下不兼容，canvas绘制出来的图片是位图
        context.rect(100,100,300,40);
        
        //绘制路径
        //context.stroke(); //绘制路径，绘制空心  矩形
        
        context.fill(); //填充
        context.fillRect(100,150,300,40);
        context.strokeRect(100,200,300,40);
        
        //清空矩形区域
        context.clearRect(250,150,150,20);
        //在做大部分反复的特效的时候，基本上都需要用到这个清空的方法
        
        
    </script>
</html>

2、canvas使用步骤

1、首先创建canvas元素

<canvas id="myCanvas" width="600" height="400"></canvas>

2、获取canvas元素

let myCanvas = document.querySelector('#myCanvas');

3、使用2D 绘图上下文

let ctx = myCanvas.getContext('2d');

4、绘制图形

方法	描述
rect()	创建矩形
fillRect()	绘制填充的矩形
strokeRect()	绘制无填充的矩形
clearRect()	矩形内清除指定的区域

示例：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="400"></canvas>
    </body>
    <script>
        let myCanvas = document.querySelector('#myCanvas');
        let ctx = myCanvas.getContext('2d');
        
        ctx.rect(100,100,300,40);
        
        //四种设置画笔的颜色
        ctx.fillStyle = 'yellow';
        // ctx.fillStyle = '#f00';
        // ctx.fillStyle = 'rgb(0,255,0)';
        // ctx.fillStyle = 'rgba(0,0,255,.5)';
        // ctx.fillStyle = 'hsl(0,100%,50%)';//色相饱和度亮度
        
        ctx.strokeStyle = 'black';
        // ctx.strokeStyle = '#f00';
        // ctx.strokeStyle = 'rgb(0,255,0)';
        // ctx.strokeStyle = 'rgba(0,0,255,.5)';
        // ctx.strokeStyle = 'hsl(0,100%,50%)';//色相饱和度亮度
        
        ctx.fill();
        ctx.stroke();
        
        ctx.fillRect(100,150,300,40);
        ctx.strokeRect(100,200,300,40);
        
        //设置线宽lineWidth
        ctx.lineWidth = 2;
        ctx.strokeRect(100,250,300,40);
        
        ctx.lineWidth = 3;
        ctx.strokeRect(99.5,299.5,300,40);
        
        // canvas的边框绘制,是从边框的中心开始绘制
        // 因为最小的绘制单位是1px,所以会出现 线宽 0.5的bug的问题
        // 所以一般绘制是偶数线宽绘制
        // 奇数绘制 也可以相应的减少0.5px
    </script>
</html>

五、绘制路径


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            canvas{
                background-color: antiquewhite;
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="600px" height="400px"></canvas>
    </body>
    <script>
        let myCanvas = document.querySelector('#myCanvas');
        let cxt = myCanvas.getContext('2d');
        
        cxt.lineWidth = 10;
        cxt.strokeStyle = 'red';
        
        //把笔移动到起始位置
        cxt.beginPath();
        cxt.moveTo(0,100);
        cxt.strokeStyle = 'blue';
        cxt.lineTo(600,100);
        cxt.stroke();
        
        cxt.beginPath()
        cxt.moveTo(500,0);
        cxt.strokeStyle = 'orange';
        cxt.lineTo(500,400);
        cxt.stroke();
            
        cxt.beginPath();
        cxt.moveTo(0,300);
        cxt.strokeStyle = 'black';
        cxt.lineTo(600,300);
        cxt.stroke();
            
        
        cxt.beginPath();
        cxt.moveTo(100,0);
        cxt.strokeStyle = 'magenta';
        cxt.lineTo(100,600);
        
        //笔触让浏览器绘制
        cxt.stroke();
        //strokeStyle会被后边的覆盖，可以加上beginPath做处理
        //每次开启路径，要指定 绘制方式（stroke或fill）
        //开启路径后，可以隔开与上一个的路径的关系，让 每次绘制 独立开来
        
        //闭合路径
        cxt.beginPath();
        cxt.moveTo(300,50);
        cxt.lineTo(500,100);
        cxt.lineTo(100,300);
        
        //自动闭合路径
        cxt.closePath();
        cxt.stroke();
    </script>
</html>

lineJoin属性

可以选择边界连接处的样式

属性值	描述
miter	斜接
round	圆滑
bevel	折角

代码示例：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            canvas {
                background-color: #FAEBD7;
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="600px" height="400px"></canvas>
    </body>
    <script>
        let myCanvas = document.querySelector('#myCanvas');
        let ctx = myCanvas.getContext('2d');
        
        ctx.lineWidth = 10;
        //边界连接处的样式
        //ctx.lineJoin = 'miter'; 
        //ctx.lineJoin = 'round'; //圆滑
        ctx.lineJoin = 'bevel'; //折角
        
        //闭合路径
        ctx.beginPath();
        ctx.moveTo(300,50);
        ctx.lineTo(500,100);
        ctx.lineTo(100,300);
        
        //自动闭合路径
        ctx.closePath();
        ctx.stroke();
    </script>
</html>

lineCap属性

可以选择端点的样式

属性值	描述
butt	默认。向线条的每个末端添加平直的边缘。
round	向线条的每个末端添加圆形线帽
square	向线条的每个末端添加正方形线帽

代码示例：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            canvas {
                background-color: #FAEBD7;
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="600px" height="400px"></canvas>
    </body>
    <script type="text/javascript">
        let myCanvas = document.querySelector('#myCanvas');
        let ctx = myCanvas.getContext('2d');
        
        ctx.lineWidth = 20;
        //ctx.strokeStyle = 'red';
        ctx.strokeStyle = 'black'
        
        ctx.beginPath();
        ctx.moveTo(100,100);
        ctx.lineTo(500,100);
        //端点的样式
        ctx.lineCap = 'butt';
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(100,200);
        ctx.lineTo(500,200);
        //端点的样式
        ctx.lineCap = 'round';
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(100,300);
        ctx.lineTo(500,300);
        //端点的样式
        ctx.lineCap = 'square';
        ctx.stroke();
        
        
    </script>
</html>

相关阅读:
利用freesurfer6进行海马分割的环境配置和步骤，以及获取海马体积
 Pytorch下张量的形状操作（详细）
PVE vi 编辑器方向键出现ABCD乱码
 Jmeter(十五)：jmeter场景的运行方式详解
 国际结算习题集及答案
 阿里云服务器的公网ipv6地址申请与配置
 GBASE 8A v953报错集锦27--企业管理器执行投影列中含有重复列名的 sql 语句报错
 C语言自定义类型_枚举&联合（3）
单链表的头插法和尾插法的示例
 【SQL 中级语法 2】自连接的用法
原文地址：https://blog.csdn.net/jingde528/article/details/127766860