作者: xiaoman

2023-07-01

This is the first post of my new Astro blog.

The Astro logo with the word One.

[[HTML5]]

HTML5 中的一些有趣的新特性： 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 calendar、date、time、email、url、search

HTML5 Canvas

创建一个画布（Canvas）

<canvas
    id="myCanvas"
    width="200"
    height="100"
></canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

JavaScript 来绘制图像

<script>
// 首先，找到 <canvas> 元素
var c=document.getElementById("myCanvas");
// 然后，创建 context 对象
var ctx=c.getContext("2d");
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 下面的两行代码绘制一个红色的矩形
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
// 设置[fillStyle属性]
//可以是CSS颜色，渐变，或图案。fillStyle默认设置是#000000（黑色）。fillRect(_x,y,width,height_) 方法定义了矩形当前的填充方式
</script>

Canvas 坐标

canvas 是一个二维网格。 canvas 的左上角坐标为 (0,0) 上面的 fillRect 方法拥有参数 (0,0,150,75)。 意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。 如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

Canvas - 路径

在Canvas上画线，我们将使用以下两种方法：