canvas学习笔记01，更新中

最新推荐文章于 2023-04-13 10:16:44 发布

qq_45512210

最新推荐文章于 2023-04-13 10:16:44 发布

阅读量261

点赞数

分类专栏：前端文章标签： canvas css html

本文链接：https://blog.csdn.net/qq_45512210/article/details/106029994

版权

9 篇文章 0 订阅

订阅专栏

canvas

<canvas id="drawing" width="1200" height="1200">Your browser does not support canvas attribute.</canvas>

首先要获取canvas的上下文对象。

var context=drawing.getContext('2d');

2d上下文的两种基本操作：

1> 绘制矩形

与矩形相关的操作方法有：fillRect，strokeRect，clearRect。三个方法参数：4个。x，y，矩形宽度，矩形高度

2> 画布上绘制路径，必须先用beginPath()，最后context.stroke();对路径进行描边

3> 绘制文本。主要有两个方法：fillText(),strokeText()。

有4个参数：要绘制的文本参数；x坐标；y坐标；最大像素宽度（可选）

3个属性：

--》1. font，文本样式，大小，字体

--》2. textAlign，文本对齐方式。start，end（推荐）；left，right；center

--》3. textBaseline可能的值： top，hanging，middle，alphabetic，ideographic和bottom

重新定位原点

context.translate(200,200);//将（200，200）设置为坐标原点

旋转元素

context.rotate(1);

跟踪上下文状态变化

调用save()方法将所有设置保存入栈，然后对上下文进行其他修改，需要之前保存的状态时，调用restore()方法，将保存的栈结构位置向前返回一级，回复之前的状态。