h5 的canvas绘制基本图形

朴灿烈づ我的快乐病毒、 2023-06-05 08:12 118阅读 0赞

文章地址：[https://www.cnblogs.com/sandraryan/][https_www.cnblogs.com_sandraryan]

canvas是一个标签，可用于绘制复杂图形，渲染效果比普通DOM快

某些低版本浏览器不支持

canvas 使用原生几乎不借助框架

目前多用于：数据统计图，地图；小网页游戏、

canvas默认样式是300\*150，背景白色，支持标签的所有样式，但一般不添加3D变换可能会影响原有内容

canvas 宽高可以通过属性直接设置

canvas 标签原生节点对象包含一个getContext函数，返回一个对象，

返回的对象中包含了一系列与绘图有关的属性和方法，要实现对应绘图效果，只需要从这个对象中调用对应函数

一个页面中可以出现多对canvas标签，使用不同的canvas节点对象的getContext值绘制的图形会渲染在对应的标签上

举个栗子

<!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>
        canvas {
            box-shadow: 0 0 10px green;
        }
        </style>
    </head>
    <body>
        <canvas id="c1" width="500" height="300"></canvas>
        <canvas id="c2" width="500" height="300"></canvas>
        <script>
        // 获取元素
        var c1 = document.querySelector('#c1');
        var c2 = document.querySelector('#c2');
        // 通过getContext获取绘图功能
        var ctx1 = c1.getContext('2d');
        console.log(ctx1);
        ctx1.beginPath();//开始绘图
        ctx1.moveTo(0,0);//线的开始点
        ctx1.lineTo(500,300);//线的结束点
        ctx1.stroke();//绘制
    
        var ctx2 = c2.getContext('2d');
        console.log(ctx2);
        ctx2.beginPath();//开始绘图
        ctx2.moveTo(0,0);//线的开始点
        ctx2.lineTo(100,200);//线的结束点
        ctx2.stroke();//绘制
        </script>

绘制效果

![1645790-20190924100834849-1320975108.png][]

## canvas画线段 ##

<canvas id="cv" width="1000" height="600"></canvas>
        <script>
        
        var cv = document.querySelector('#cv');
        // 获取绘图对象
        var ctx = cv.getContext('2d');
        // 开启一条新路径，相当于画完一个图形，抬起画笔重新画下一个图形，否则就会连在一起
        // 线段要有开始点 结束点
        ctx.beginPath();
        ctx.strokeStyle = 'red';  // 设置绘制线条的颜色
        ctx.lineWidth = 20;// 设置绘制线条的粗细  
        // 绘制的内容的样式要在绘制前设置
        ctx.moveTo(300,100);
        ctx.lineTo(400,600);
        ctx.stroke();
        </script>

![1645790-20190924101828211-224052601.png][]

绘制多个三角形

<body>
        <canvas id="cv" width="1000" height="600"></canvas>
        <script>
        var cv = document.querySelector('#cv');
        // 获取绘图对象
        var ctx = cv.getContext('2d');
        ctx.beginPath();
        ctx.strokeStyle = 'red';
        ctx.moveTo(100,100);
        ctx.lineTo(400,400);
        ctx.lineTo(100,600);//llineTo可以重复使用
        // ctx.lineTo(100,100);
        ctx.closePath();//闭合此次绘制中的开始点和结束点
        ctx.stroke();
    
        ctx.beginPath();
        ctx.strokeStyle = 'green';
        ctx.moveTo(300,200);
        ctx.lineTo(100,100);
        ctx.lineTo(200,300);
        ctx.closePath();
        ctx.stroke();
        // 可以在一个path重复使用moveTo lineTo，重复使用moveTo相当于重新开始path
        ctx.moveTo(500,300);
        ctx.lineTo(400,500);
        ctx.lineTo(100,500);
        ctx.closePath();
        ctx.stroke();
        </script>
    </body>

![1645790-20190924103217695-316755767.png][]

## 绘制矩形 ##

<canvas id="cv" width="1000" height="600"></canvas>
            <script>
                var cv = document.querySelector('#cv');
                var ctx = cv.getContext('2d');
                //绘制矩形 
                // 空心矩形
                ctx.strokeRect(100,100,200,300);
                // 实心矩形
                ctx.fillStyle = '#ff0';
                ctx.fillRect(400,100,300,200);
                // 绘制空心矩形，ctx.strokeRect(x,y,w,h);
                // 绘制实心矩形，ctx.fillRect(x,y,w,h);
                // x，y 是要绘制的矩形左上角再canvas上的坐标
                // w,h 是要绘制的矩形宽高
                // 要改变样式，stroke绘制用strokeStyle修改，fill绘制，fillStyle修改
            </script>

![1645790-20190924143147407-1696452642.png][]

##  绘制圆形 ##

<canvas id="cv" width="1000" height="600"></canvas>
            <script>
                var cv = document.querySelector('#cv');
                var ctx = cv.getContext('2d');
                ctx.arc(500,300,200,0,Math.PI,true);            
                ctx.stroke();
                ctx.arc(ox,oy,r,start,end,boolean);
                // ox oy要绘制的弧度对应的圆心位置
                // r弧度的半径
                // start end 弧度开始和结束的圆心角
                // boolean 顺时针绘制（默认false），true逆时针            
            </script>

![1645790-20190924150317583-1554228885.png][]

var cv = document.querySelector('#cv');
                var ctx = cv.getContext('2d');
                ctx.arc(500,300,200,0,Math.PI,true);            
                ctx.fill();
    　　　　　　　//实心圆

![1645790-20190924150454191-605394282.png][]

转载于:https://www.cnblogs.com/sandraryan/p/11576915.html

[https_www.cnblogs.com_sandraryan]: https://www.cnblogs.com/sandraryan/
[1645790-20190924100834849-1320975108.png]: /images/20230601/15733f7f9880456f94e0c0ef429bac13.png
[1645790-20190924101828211-224052601.png]: /images/20230601/3099e1211a854d0a87ea38833fae03af.png
[1645790-20190924103217695-316755767.png]: /images/20230601/6855e72cb5924454a3e513adc9e5475d.png
[1645790-20190924143147407-1696452642.png]: /images/20230601/6e41d7347035460f92af29382f1c63f6.png
[1645790-20190924150317583-1554228885.png]: /images/20230601/d8be3add433e4d92bb93ad3fc6ce900c.png
[1645790-20190924150454191-605394282.png]: /images/20230601/16bd8930870b4d8a8994e053657285ab.png