ES6_day01

  • ES6_day01已关闭评论
  • 124 次浏览
  • A+
所属分类:Web前端

### canvas特性

标签中的文本只有在浏览器下支持canvas标签时才显示

行内块元素

高度设置在标签属性上

### 填充色设置

ctx.fillStyle="#ff0000"

### 线条颜色设置

ctx.strokeStyle="ff0000"

### 线条粗细

ctx.lineWidth=""

线 moveTo(x,y) 开始位置 lineTo(x,y) 结束位置

### 线条端点

ctx.lineCap="round" 圆滑

### 圆弧

ctx.arc(圆心x,圆心y,半径,开始弧度,结束弧度,顺逆时针)

弧度3点钟位置是0,顺时针方向6点 1/2Π 9点Π 十二点1.5Π 重新到3点2Π

最后参数默认false,顺时针

### .beginPath() 开始新路径

### 矩形

.strokeRect(x,y,width,height)和.fillRect(x,y,width,height) 直接绘制矩形

closePath() 封闭路径 将开始位置和结束位置链接

### 文字

.strokeText("1234",x,y)

.fillText("1234",x,y)

.font="px 黑体"

### 图片

.drawImage(img元素,图片水平裁剪的开始位置,图片垂直裁剪的开始位置,裁剪的宽带,裁剪的高度,画布放置位置x,画布放置位置y,放置宽度、放置高度)

  (img,放置x,放置y) 图片大小与原图一致

  (img,放置x,放置y,防止宽度,放置高度)