初识HTML5 canvas

最新推荐文章于 2024-08-14 15:45:18 发布

☆叙

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量146

点赞数 1

分类专栏： HTML5 canvas 文章标签： canvas javascript html

本文链接：https://blog.csdn.net/qq_49721447/article/details/112303620

版权

HTML5 canvas 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML5 canvas

canvas 介绍

canvas是HTML5中自带的一个标签，它主要是用于图形的绘制。
canvas是一个矩形容器，你可以把它理解为一个画布，在画布中，你需要使用JavaScript进行绘图。

canvas使用准备

<canvas id="myCanvas" width="400" height="500" style="border:1px solid #000000;">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

以上两个代码块是使用canvas的必须包含的过程，首先在HTML5中添加canvas标签，定义id属性，在JavaScript中调用这个id属性，width和height分别定义了canvas画布的宽度和高度，style="border:1px solid #000000;"
这段代码给画布加个边框，是为了更好地将画布展示出来。
javascript代码中，首先将canvas的id属性绑定，再使用
getContext( ) 方法，定义绘图环境，2d表示绘图环境是二维的。
结果如下

使用canvas绘制一张简单的图

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>canvas简单画图</title> 
</head>
<body>

<canvas id="myCanvas" width="400" height="500" style="border:1px solid #000000;">
</canvas>
<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//开始绘制树身
ctx.beginPath();
//给树身定义填充绿色
ctx.fillStyle="green";
//定义起始点的位置（200,0）
ctx.moveTo(200,0);
//以下为路径，从起始点开始，连线经过以下点
ctx.lineTo(100,200);
ctx.lineTo(150,200);
ctx.lineTo(50,400);
ctx.lineTo(350,400);
ctx.lineTo(250,200);
ctx.lineTo(300,200);
ctx.lineTo(200,0);
//fill() 方法开始填充当前的图像。默认颜色是黑色,使用fillStyle修改填充颜色。
ctx.fill();
//closePath() 方法创建从当前点到开始点的路径。
ctx.closePath();

//绘制树的躯干
ctx.beginPath();
//给树的躯干定义填充棕色
ctx.fillStyle="brown";
//定义起始点的位置（150,400）
ctx.moveTo(150,400);
ctx.lineTo(250,400);
ctx.lineTo(250,500);
ctx.lineTo(150,500);
//开始填充颜色
ctx.fill();
ctx.closePath();
//stroke() 实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径
//默认颜色是黑色,使用strokeStyle修改填充颜色。
ctx.stroke();

</script>
</body>
</html>

beginPath() 方法一般与 closePath() 方法配套使用，前者开始绘制一条路径，或重置当前的路径；后者创建从当前点到开始点的路径，停止绘制图形。
stroke() 实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径（不会将起始点与终止点连接），默认颜色是黑色,使用strokeStyle修改填充颜色。
若不需要封闭图形，或起始点与终止点是同一个点时，可省略closePath() 方法，但 stroke() 方法不可省略
moveTo() 方法和 lineTo() 方法，这两个方法一般是同时存在的，moveTo() 定义起始点的位置，lineTo() 定义经过点的位置，使用这两个方法会自动生成一条路径，连接向两个点。
详细效果见代码
结果展示
使用canvas绘制的简单图形

☆叙

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
初识HTML5 canvas

HTML5 canvascanvas 介绍canvas是HTML5中自带的一个标签，它主要是用于图形的绘制。canvas是一个矩形容器，你可以把它理解为一个画布，在画布中，你需要使用JavaScript进行绘图。canvas使用准备<canvas id="myCanvas" width="400" height="500" style="border:1px solid #000000;">var c=document.getElementById("myCanvas");v
复制链接

扫一扫