HTML5画布Canvas

最新推荐文章于 2024-03-31 09:18:14 发布

原创最新推荐文章于 2024-03-31 09:18:14 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了HTML5 Canvas的基本概念与使用方法，包括如何创建画布、使用JavaScript进行绘图，以及Canvas的一些常用属性和方法，如fillStyle、font、fillRect和drawImage等。

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

一、Canvas概念介绍

1、概念 Canvas ：画布

2、作用： HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成。它本身只是个图形容器,必须使用脚本来绘制图像

二、画图步骤

1、创建一个画布

注意：<canvas>元素没有边框和内容, 使用 style 属性来添加边框

2、使用JavaScript来绘制图像

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
    
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,20,25);


</script>

</body>
</html>