type
status
category
date
slug
summary
tags
icon
Last edited time
May 21, 2023 07:57 AM
一、什么是canvas
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
二、如何使用canvas
1、建立一个canvas实例
效果：
2、使用JavaScript绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
三、Canvas的几个参数
1、Canvas坐标
canvas 是一个二维网格
canvas 的左上角坐标为 (0,0)
2、Canvas路径
在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y)定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到 "ink" 的方法，就像stroke()
在canvas中绘制圆形, 我们将使用以下方法:
arc(x,y,r,start,stop,counterclockwise)
x：x坐标
y：y坐标
r：半径
start：起始角度，弧度制
stop：结束角度，弧度制
counterclockwise:可选，顺时针或者逆时针 False = 顺时针，true = 逆时针
3、Canvas文本
使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
4、图像
把一幅图像放置到画布上, 使用以下方法:
drawImage(image,x,y)
我最开始是这样写的然后我发现，这样写并不能显示出图像
查阅网上资料后了解到
在canvas中插入图片，必须等到图片完全加载后才能对其进行操作，浏览器通常会在页面脚本执行的同时异步加载图片。 如果试图在图片未完全加载之前就将其呈现到canvas上，将不会显示任何图片。
所以修改之后的代码是：
效果：
三、我画的花里胡哨的图案
效果：
- 作者:Jimmy Huang
- 链接:https://huangjihao.com/f5b48c1b-7fe1-4771-8660-472adf2898b2
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
