Canvas绘制矩形&圆形&图片 Canvas绘制矩形&圆形&图片

1.方式一:先设置 rect, 再设置样式
2.方式二:先设置样式, 再设置strokeRect,fillRect
1. 快速创建矩形rect()方法

语法：ctx.rect(x, y, width, height);
解释：x, y是矩形左上角坐标， width和height都是以像素计
rect方法只是规划了矩形的路径，并没有填充和描边。
改造案例：04填充矩形.html
rect: abbr. 矩形（rectangular）；收据（receipt）

2. 快速创建描边矩形和填充矩形

语法： ctx.strokeRect(x, y, width, height);
参数跟ctx.rect相同，注意此方法绘制完路径后立即进行stroke绘制
语法：ctx.fillRect(x, y, width, height);
参数跟ctx.rect相同，此方法执行完成后。立即对当前矩形进行fill填充。

3. 清除矩形(clearRect)

语法：ctx.clearRect(x, y, width, hegiht);
解释：清除某个矩形内的绘制的内容，相当于橡皮擦。

绘制圆形（arc)

概述：arc() 方法创建弧/曲线（用于创建圆或部分圆）。
语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
arc: 弧（度）弧形物；天穹英 [ɑ?k] 美 [ɑrk]
counter 反击，还击；反向移动，对着干；反驳，回答 ['ka?nt?] 美 ['ka?nt?]
解释：
x,y：圆心坐标。
r：半径大小。
sAngle:绘制开始的角度。圆心到最右边点是0度，顺时针方向弧度增大。
eAngel:结束的角度，注意是弧度。π
counterclockwise：是否是逆时针。true是逆时针，false：顺时针(默认)
弧度和角度的转换公式： rad = deg*Math.PI/180;
在Math提供的方法中sin、cos等都使用的弧度

文章图片
image.png

三角函数的补充
Math.sin(弧度); //夹角对面的边和斜边的比值
Math.cos(弧度); //夹角侧边与斜边的比值
圆形上面的点的坐标的计算公式
x =x0 + Math.cos(rad) * R; //x0和y0是圆心点坐标
y =y0 + Math.sin(rad) * R; //注意都是弧度

文章图片
image.png

绘制图片（drawImage）（重点） 1 基本绘制图片的方式

context.drawImage(img,x,y);
参数说明： x,y 绘制图片左上角的坐标，在画布上绘制的坐标点 img是绘制图片的dom对象。

2 在画布上绘制图像，并规定图像的宽度和高度

context.drawImage(img,x,y,width,height);
参数说明：width 绘制图片的宽度, height：绘制图片的高度
如果指定宽高，最好成比例，不然图片会被拉伸
等比公式： toH = Height * toW / Width;
设置的高度 = 原高度 * 设置的宽度 / 原宽度;

3 图片裁剪，并在画布上定位被剪切的部分

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数说明：
- sx,sy 裁剪的左上角坐标，
- swidth：裁剪图片的高度。
- sheight:裁剪的高度
- 其他同上

4 用JavaScript创建img对象

第一种方式：

var img = document.getElementById("imgId");

第二种方式：

var img = new Image(); //这个就是 img标签的dom对象 img.src = "https://www.it610.com/article/imgs/arc.gif"; img.alt = "文本信息"; img.onload = function() { //图片加载完成后，执行此方法

【Canvas绘制矩形&圆形&图片】示意图:

原图片:

ctx.drawImage(img, 100, 100, 300, 216);

截取图片:

裁剪的位置: sx,sy,swidth,sheight : 50 50 120 120 sx,sy,swidth,sheight 相对于原图片的裁剪区域放置位置:x,y,width,height : 350, 100, 120, 120 x, y ,width, height 相对于画布的显示区域 ctx.drawImage(img, 50, 50, 120, 120, 450, 100, 120, 120);