CSS基础12-canvas_canvas css，2024年最新这份字节跳动历年校招大数据开发面试真题解析

ctx.lineWidth=width; ctx.stroke(); ctx.closePath(); }

### 画矩形


* rect(x,y,width,height)
	+ x,y矩形坐标
	+ width,height宽高
* strokeRect(x,y,width,height)
	+ 描边矩形
* fillRect(x,y,width,height)
	+ 填空矩形
	+ 会自动闭合路径
* clearRect(x,y,width,height)
	+ 清除矩形
	+ 清空画布，类似与橡皮檫


### 画圆


* arc(x,y,radius,startAngle,endAngle,counterclockwise)
	+ x,y描述圆心坐标
	+ radius圆形半径
	+ startAngle,endAngle起始角度和结束角度
	+ counterclockwise顺时针和逆时针


### 绘制文字


* fillText()绘制无填充文字
* strokeText()绘制有填充文字
* measureText()返回文本宽度对象
* font='red’CSS样式
* textBaseline='bottom’设置底线对齐绘制基线
* textAlign='left’设置文字对齐方式

Document canvas{ margin: 0 auto; border: 1px solid #000; display: block; }

### 绘制图片


* context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
	+ imgDOM对象||也可以是画布，也就是把一个画布整体的渲染到另外一个画布上
	+ sx,sy裁剪框左上角X和Y坐标
	+ swidth,sheight裁剪宽高
	+ x,y图片坐标
	+ width,height图片宽高

Document canvas{ margin: 0 auto; border: 1px solid #000; display: block; }

### 阴影与线性渐变和圆形渐变


#### 阴影


* shadowColor ： 设置或返回用于阴影的颜色
* shadowBlur ： 设置或返回用于阴影的模糊级别,大于 1 的正整数，数值越高，模糊程度越大
* shadowOffsetX： 设置或返回阴影距形状的水平距离
* shadowOffsetY： 设置或返回阴影距形状的垂直距离


#### 线性渐变


* ctx.createLinearGradient(x0,y0,x1,y1);
	+ x0,y0 起始坐标
	+ x1,y1 结束坐标


#### 圆形渐变


* context.createRadialGradient(x0,y0,r0,x1,y1,r1)
	+ x0: 渐变的开始圆的 x 坐标
	+ y0: 渐变的开始圆的 y 坐标
	+ r0: 开始圆的半径
	+ x1: 渐变的结束圆的 x 坐标
	+ y1: 渐变的结束圆的 y 坐标
	+ r1: 结束圆的半径

Document canvas{ margin: 0 auto; border: 1px solid #000; display: block; }

### 位移画布



#### 移动


ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置



#### 旋转


context.rotate(angle); 方法旋转当前的绘图



#### 缩放


context.scale(scalewidth,scaleheight)



#### 保存


ctx.save() 保存当前环境的状态  
 可以把当前绘制环境进行保存到缓存中。



#### 重置


ctx.restore() 返回之前保存过的路径状态和属性  
 获取最近缓存的 ctx；需要和save()配合使用



### 将图片输出为base64格式


* canvas.toDataURL(type, encoderOptions)
	+ type，设置输出的类型，比如 image/png image/jpeg
	+ encoderOptions： 0-1 之间的数字，用于标识输出图片的质量，1 表示无损压缩，类型为： image/jpeg 或者 image/webp 才起作用



## cnavas对图片裁剪

裁剪图片 \*{ margin: 0; padding: 0; } .wrap{ width: 800px; margin: 0 auto; } .canvasBox{ width: 600px; height: 600px; background-color: #eee; position: relative; } .mark{ width: 50%; height: 50%; background-color: rgba(0,0,0,0.5); position: absolute; top: 150px; left: 150px; /\*display: none;\*/ } ul{ display: flex; width: 600px; justify-content: space-between; } li{ list-style: none; }

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！