HTML5--画图

最新推荐文章于 2025-06-11 11:22:43 发布

七拾四

最新推荐文章于 2025-06-11 11:22:43 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端1 文章标签： html5 前端

本文链接：https://blog.youkuaiyun.com/weixin_44348052/article/details/125642914

前端1 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了HTML5的两种绘图方法——<canvas>和内联SVG，详细阐述了如何创建画布、绘制图形、使用颜色渐变及处理图像。同时，对比了两者在图形描述和交互性上的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面：很多内容都是对w3cschool教程的复述，深入学习建议w3cschool - 编程狮，随时随地学编程

两种方法

html5的绘图除了<cancas>外，还支持内联SVG。

一、<canvas>

<canvas>标签实际上是装载图形的容器，在使用中需要通过脚本(通常是JavaScript)来绘制图形。

1 创建画布

<canvas id = "ACanvas" width = "200"  height = "100"></canvas>

<canvas>标签默认没有边框和内容，同一个HTML页面可以存在多个<canvas>元素。

2 使用JS绘制图形

//获取页面的<canvas>元素
var canvas = document.getElementById("ACanvas");

//创建context对象
var ctx = canvas.getContext("2d");

//绘制(这里是一个红色的矩形)
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

3 坐标

canvas是一个二维网格，以左上角为原点，坐标为(0,0)。

(0,0,150,75)的意义为从左上角(0,0)开始绘制一个150x75的矩形

4 路径

4.1 画线

ctx.moveTo(0,0);      //定义线段开始坐标
ctx.lineTo(200,100);  //定义线段结束坐标
ctx.stroke();//画线

4.2 画圆

ctx.arc(95,50,40,0,2*Math.PI);//arc(x,y,r,start,stop)
ctx.stroke();                 //使用fill()也可以

5 文本

ctx.font="30px Arial";              //定义绘制的字体
ctx.fillText("Hello World",10,50);  //实心文本
ctx.strokeText("Hello World",10,50);//空心文本

6 颜色渐变

使用渐变步骤为创建渐变类型-指定停止颜色-使用渐变

渐变方式有两种，分别为线条渐变createLinearGradient(x,y,x1,y1)和径向/圆渐变createRadialGradient(x,y,r,x1,y1,r1)

注：使用径向渐变时参数含义

x：表示渐变的开始圆的 x 坐标
y：表示渐变的开始圆的 y 坐标
r：表示开始圆的半径
x1：表示渐变的结束圆的 x 坐标
y1：表示渐变的结束圆的 y 坐标
r1：表示结束圆的半径

var grd=ctx.createLinearGradient(0,0,200,0); //创建线条渐变
grd.addColorStop(0,"red");                   //指定开始颜色
grd.addColorStop(1,"white");                 //指定结束颜色

ctx.fillStyle=grd;                           //设置为渐变
ctx.fillRect(10,10,150,80);                  //绘制图形

7 图像

var c=document.getElementById("ACanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

<canvas>的完整属性详见HTML 画布_w3cschool

二、内联SVG

就是将SVG图形嵌入至HTML页面中，具体使用如下：

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

</body>
</html>

rect定义矩形，circle定义圆形，ellipse定义椭圆，line，polyline定义线和折线，polygon定义多边形，path定义路径。

SVG图形的介绍HTML5 内联SVG - 简书 (jianshu.com)