canva五角星空html,使用canvas绘制一个五角星

一、了解canvas

canvas 是HTML5新增的元素，用于在网页上绘制图形。但 canvas 只是图形的容器，必须要通过脚本(通常是JavaScript)来绘制图形。

可以通过多种方法使用canvas标签来绘制路径、盒、圆、字符及添加图像等。

与 标签间插入的内容是供不支持 canvas 元素的浏览器显示的，可以用来做兼容，例如：

您的浏览器暂时不支持canvas，请升级或更换您的浏览器！

复制代码

使用 canvas 来绘制图形：

// 使用id来寻找canvas元素

var myCanvas = document.getElementById('myCanvas');

if (myCanvas.getContext) {

// 创建context对象

// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

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

// 写一个Hello World先

ctx.font = "30px Arial";

ctx.fillText("Hello World", 10, 50);

}

复制代码

二、使用canvas绘制一个五角星

// 使用id来寻找canvas元素

var myCanvas = document.getElementById('myCanvas');

if (myCanvas.getContext) {