注册登录

h5 的canvas绘图

文章地址：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>
知识兔

绘制效果

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>
知识兔

 绘制多个三角形

<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>
知识兔
计算机