前端之canvas详解(一)——线条的各种画法

myzbx 2025-01-11 15:34 53 浏览

一、什么是canvas?

canvas是h5新增的标签。由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。简单的来说就是一块画布。

新增的标签，所以它是有兼容性问题的。 Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 <canvas>, Internet Explorer 从 IE9 开始 <canvas> 。Chrome 和 Opera 9+ 也支持 <canvas>

二、canvas的使用。

在html文件的<body></body>标签中书写canvas标签。并限定画布的大小（不设宽高的话，默认宽300px，高150px），由于有一部分浏览器并不支持canvas标签，所以在标签里加入的替换的内容，当浏览器不显示canvas标签时，会有替换的内容做提示用。

<body>
    <canvas id="canvas" width="300" height="300">
        <span>你的浏览器不支持 canvas，请升级你的浏览器。</span>
    </canvas>
</body>

接着我们需要用js对canvas进行绘画。需要先获取canvas元素，如下：

var canvas = document.getElementById('canvas');   //  获取canvas标签
var ctx = canvas.getContext('2d');  // 创建内容对象

 if (!canvas.getContext) return; // 画图判断，如果不能画，自动结束

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。我们先在js文件里画一条直线：

function draw(){
    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d'); 
    if (!canvas.getContext) return; 
  
    ctx.moveTo(0,0);  // 指定线的起点 ,moveTo的两个参数依次代表x轴坐标，y轴坐标。
    ctx.lineTo(200,100);  // 指定线的下一点 ,lineTo的两个参数依次代表x轴坐标，y轴坐标。
    ctx.stroke();  // 把刚才的路径以线条的方式展示出来
  //   在此处可以接着画出更多内容
}

draw()

得到如图所示的一条斜线：

解释一下上面的位置坐标，现在我们设置的画布宽和高都是300，（0，0）就相当于画布的左上角，（300，300）就相当于画布的右下角。

画一条宽度为10的线：

function draw(){
    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d'); 
      if (!canvas.getContext) return; 
  
    ctx.moveTo(100,100);  
    ctx.lineTo(200,100);  
    ctx.lineWidth = 10;  //设置线的宽度10px;
    ctx.stroke();  
}

draw()

设置线的端点的样子和线条颜色：

function draw(){
    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d'); 
      if (!canvas.getContext) return; 
  
    ctx.moveTo(100,100);  
    ctx.lineTo(200,100);  
    ctx.lineWidth = 10; 
   ctx.lineCap="round"; // 此处设置以圆形结束，"butt", "round", "square"可以自己试一试。
    ctx.strokeStyle="blue" ; //设置线条的颜色，如果不设置，默认填充黑色
    ctx.stroke();  
}

draw()

画虚线：用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式。 setLineDash 方法接受一个数组，来指定线段与间隙的交替；lineDashOffset属性设置起始偏移量。

function draw(){
    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d'); 
      if (!canvas.getContext) return; 
  
    ctx.setLineDash([20, 5]);  // [实线长度, 间隙长度]
    ctx.lineDashOffset = -0;
    ctx.strokeRect(50, 50, 210, 210);
}

draw()

画连续两条直线：

function draw(){
    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d'); 
      if (!canvas.getContext) return; 
  
    ctx.moveTo(100,100);  
    ctx.lineTo(150,150);  
    ctx.lineTo(200,100);  
    ctx.stroke();  
}

draw()

画一个三角形：

function draw(){
    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d'); 
      if (!canvas.getContext) return; 
  
  // 第一条路径
    ctx.beginPath(); //新建一条path
     ctx.moveTo(100,100);  
    ctx.lineTo(150,150);  
    ctx.lineTo(200,100); 
    ctx.closePath(); // 结束这条路径。这时候会把起点和终点连接起来。
    ctx.stroke();  
}

draw()

你会发现这次画直线多了ctx.beginPath();ctx.closePath();这样的话就可以自动首尾相连，成为一个闭合的图形，当然，你直接画一条线把首尾连接起来也可以。

可以给三角形填充颜色：

function draw(){
    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d'); 
      if (!canvas.getContext) return; 
  
  // 第一条路径
    ctx.beginPath(); //新建一条path
    ctx.moveTo(100,100);  
    ctx.lineTo(150,150);  
    ctx.lineTo(200,100);  
    ctx.closePath(); // 结束这条路径。这时候会把起点和终点连接起来。
    ctx.stroke();  
   ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
}

draw()

填充我们自定义颜色

function draw(){
    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d'); 
      if (!canvas.getContext) return; 
  
  // 第一条路径
    ctx.beginPath(); 
    ctx.moveTo(0,40);  
    ctx.lineTo(200,40);  
    ctx.lineTo(200,60);   
    ctx.closePath(); 
    ctx.strokeStyle="blue";
    ctx.stroke();  
  
   ctx.fillStyle="red"; //设置填充的颜色，如果不设置，默认填充黑色
   ctx.fill(); 
}

draw()

欢迎点赞关注，下期继续讲解canvas更多知识！

HTML 画布

上一篇：HTML5(五)——Canvas API
下一篇：html2canvas不支持文本缩放的解决方案

前端之canvas详解(一)——线条的各种画法

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿