canvas初体验

最新推荐文章于 2021-06-25 18:01:13 发布

原创最新推荐文章于 2021-06-25 18:01:13 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

Canvas 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何使用HTML5的Canvas元素进行绘图，包括设置Canvas标签、使用JavaScript创建context对象绘制矩形、线条、圆形及添加文本。通过实际代码示例，读者可以快速掌握Canvas的基本用法。

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

1.对canvas的简单介绍： canvas是HTML5新增的组件，他就像是一块画布，可以用js在上面绘制各种图表，动画等。

2.定义一个canvas标签（如果浏览器不支持canvas标签显示p标签中的文字）

<canvas id="demoCanvas" width="500" height="500" style="border:1px solid #000;">
    <p>你的浏览器不支持Canvas</p>
</canvas>

3.使用JavaScript绘制图像

（1）找canvas元素

（2）创建context对象（内部具有多种绘制图形，路径，字符，和添加图象的方法）

（3）绘制一个红色的矩形

<script>
    var canvas = document.getElementById("demoCanvas");
    var pencil = canvas.getContext("2d");
    pencil.fillStyle = "#ff0000";
    pencil.fillRect(0, 0, 150, 75);
</script>

4.路径

画线：moveTo（x, y）定义线条开始坐标 lineTo(x, y) 定义线条结束坐标

pencil.moveTo(100, 0);
pencil.lineTo(200,100);
pencil.stroke();//笔触

5.完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="demoCanvas" width="500" height="500" style="border:1px solid #000;">
    <p>你的浏览器不支持Canvas</p>
</canvas>
<script>
    var canvas = document.getElementById("demoCanvas");
    var pencil = canvas.getContext("2d");
//  画一个矩形
    pencil.fillStyle = "#ff0000";
    pencil.fillRect(0, 0, 100, 100);

//  画一条线
    pencil.moveTo(120, 0);
    pencil.lineTo(200,100);
    pencil.stroke();//笔触

//  画一个圆
    pencil.beginPath();
    pencil.arc(320,50,40,0,2*Math.PI);
    pencil.stroke();//笔触
//  文本
    pencil.font= "30px Arial";
    pencil.fillText("HELLO WORLD", 0, 200);
//  放一个图象
    
</script>
</body>
</html>