如何使用HTML canvas来画图

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

weixin_33852020

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

阅读量457

点赞数 1

CC 4.0 BY-SA版权

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/3877634/blog/1824215

本文详细介绍如何在HTML中使用Canvas元素进行基本图形绘制，包括设置画布尺寸、检测浏览器支持性、使用JavaScript获取渲染上下文及绘制文本和矩形等。

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

2019独角兽企业重金招聘Python工程师标准>>>

将canvas添加到HTML中

<canvas>标签自身只有两个属性: width, height. 二者在没有指定的时候（标签内指定或者CSS指定）分别默认为300 pixels和150 pixels.

当然除此之外，canvas还有一个HTML的全局属性——id属性.

<!DOCTYPE html>  <!--说明这是一个html页面-->

<html lang="en">  <!--指明语言，zh中文，fr法语，de德语，it意大利语，ja日语，ko韩语-->
    <head>
        <meta charset="UTF-8">  <!--说明字符编码模式，放在head中-->
        <script type="text/javascript" src="xxxx"></script>  <!--建议将javascript插入到head中-->
        <title>page_name</title>
    </head>
    <body>
        <canvas id="mycanvas" width="500" height="500">浏览器不支持canvas</canvas>
    </body>
</html>

书写canvas标签还有一点切记：canvas的结束标签不可以省略！

canvas的支持性

并不是每个浏览器都支持canvas标签，除了要检查浏览器的支持性外，还要设置好在不支持情况下canvas标签的替换内容（用以提示用户信息或者干脆建议用户将浏览器升级到最新版本）

<canvas id="mycanvas1" width="150" width="150">
    <!--这里的图片就是在浏览器不支持canvas的时候的替换内容-->
    <img src="..." width="150" height="150" alt=""/>  
</canvas>

下面是如何通过Javascript来检测浏览器是否支持canvas标签.

if(canvas.getContext){
    var ctx = canvas.getContext('2d');
    //continue drawing
}else{
    //canvas-unsupported code here
}

最后的准备工作

准备工作到这里还没有结束，还必须使用 getContext(contextId) 来获取canvas标签的渲染上下文，通过这个上下文方可以调用各种绘画函数.我们不妨将渲染上下文想象成一个画笔，只有获得画笔我们才能进行绘画.

这里的contextId有两种取值："2d"和"experimental-webgl". 平时我暂且使用前者就好了，它会返回一个CanvasRenderingContext2D对象.

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

开始绘画

canvas就是一个画布，标签的大小就是画布的大小。我们通过坐标来定位并在这张画布上绘画。绘画之前canvas是空的，画布以左上角为原点（0,0），向右和向下为正方向。

绘画之前，先蘸取画笔的颜色.

//蘸取画刷颜色
context.fillStyle = "#ffffaa";

然后便可以进行绘画.

最简单的绘画从画文本开始，没错，我们把文字的当做最简单的图形.

//设置字体
context.font = "20px Sans-Serif";
//画一个文本
context.fillText("Hello World!", 195, 190);

在canvas中只有一种图形我们可以直接通过调用函数就可以绘画出来，那就是矩形。这也就意味着，其余所有的图形，我们都需要通过绘制路径来拼成我们想要的图形，诸如三角形、梯形等等.

fillRect(x, y, width, height) 绘画实心矩形

strokeRect(x, y, width, height) 绘画空心矩形

clearRect(x, y, width, height) 擦除矩形范围内的所有的像素点

//画一个矩形
context.fillRect(0, 0, 500, 300);
//画一个文本
context.fillText("Hello World!", 195, 190);

//设置字体
context.font = "20px Sans-Serif";

//设置字体的垂直对齐方式
context.textBaseline = "top";