HTML canvas系列-入门（1）

最新推荐文章于 2021-08-03 23:43:06 发布

劈星斩月

最新推荐文章于 2021-08-03 23:43:06 发布

阅读量278

点赞数

分类专栏：前端开发 # HTML5 canvas 文章标签： html5 canvas javascript

本文链接：https://blog.csdn.net/qq_31694843/article/details/106195453

版权

前端开发同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML5 canvas

9 篇文章 0 订阅

订阅专栏

HTML canvas系列-入门（1）

1、canvas元素
2、上下文
3、画布坐标
4、主要功能
5、示例--绘制Hello World！

说明：网上资料很多，本文不对canvas进行详细介绍，着重于应用

1、canvas元素

canvas 是用于结合脚本语言（通常为JavaScript）绘制图表、动画的HTML元素。

<canvas id="chart" width="150" height="150"></canvas>

如不设置宽度和高度，canvas初始化宽度为300px和高度为150px。

2、上下文

canvas上下文是具有属性和方法的对象，使用这些属性和方法可以在canvas元素内呈现图形。上下文可以是2d或
webgl（3d）。
每个canvas元素有且只有一个上下文，通过getContext()方法获得。

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

3、画布坐标

Canvas元素内默认被网格覆盖，起点为左上角，坐标（0,0），画布中所有元素的位置都相对于起点定位。

4、主要功能

绘制线条
绘制/填充/清除矩形
绘制圆弧/圆
绘制图形

5、示例–绘制Hello World！

<!DOCTYPE HTML>
<html>
	<head>
	</head>
	<body>
		<!-- 定义canvas元素 -->
		<canvas id="chart" width="450" height="200" style="border: 1px solid black;"></canvas>
		<script>
			//创建上下文
			var canvas = document.getElementById('chart');
			var context = canvas.getContext('2d');
			
			//设置字体
			context.font = '40px 宋体';
			//设置字体颜色
			context.fillStyle = '#000000';
			//绘制文本，开始坐标（100,100)
			context.fillText('Hello World!', 100, 100);
		</script>
	</body>
</html>