Canvas

第1章 画布元素的使用

第1节 绘制线条

• 画布的作用

  Canvas 元素作为HTML5标准的一部分，允许你通过脚本动态渲染图像。每一个 canvas 元素都有一个上下文环境对象，在其中可以绘制任意图形。

• 简单的使用

  1. 在页面中添加画布元素
  2. 获取画布元素的上下文环境对象
  3. 使用上下文环境对象绘制图形，保存在内存中
  4. 绘制一个线条

  //设置画布的起始点
  context.moveTo(x,y);
  //从当前位置绘制直线到x,y坐标
  context.lineTo(x,y);
  

第2节 绘制不同线条颜色的三角形

• 绘制三角形

  绘制一个简单的三角形

• 绘制的颜色与线条宽度

  //设置笔触图形的颜色
  context.strokeStyle=color
  -------------------------
  //设置线条的宽度，以像素为单位
  context.lineWidth=number
  

• 重置路径

• //开始一条路径，或重置当前的路径,并切断和上一个图形的路径联系
  context.beginPath()
  

• 重置路径的优势

  可以实现不同大小和颜色图形的单独绘制。

第2章 其他绘制API

第1节 文字绘制API

• 指定位置

  //在指定位置和宽度内绘制文字
  context.fillText(text,x,y,maxWidth); //最大宽度
  

• 设置字体名称和样式

  //设置字体名称和形状
  context.font='字体属性' //bold 32px sans-serif
  

• 设置字体对齐位置

  //设置文本内容水平对齐方式
  context.textAlign='水平方位值' //center|left|right
  //设置文本内容垂直对齐方式
  context.textBaseline='垂直方位值' //top|middle|bottom
  

• 绘制内容另存为图片

  //当前绘制内容存为图片
  context.toDataURL(type, encoderOptions);//image/png图片格式,0到1区间图片质量
  

第2节 绘制矩形和圆形及图片

• 绘制矩形

  //绘制矩形的路径
  context.rect(x,y,width,height);
  //绘制无填充的矩形
  context.strokeRect(x,y,width,height);
  //绘制填充的矩形
  context.fillRect(x,y,width,height);
  //清空指定矩形内像素
  context.clearRect(x,y,width,height);
  

• 绘制有弧度的圆形

  //在指定位置绘制一个圆形
  context.arc(x,y,r,sAngle,eAngle,clockwise);
  

• 绘制不同大小的图片

  //在画布上绘制固定坐标的图像
  context.drawImage(img,x,y);
  //在画布上绘制不仅固定坐标，且规定图像的宽度和高度图像
  context.drawImage(img,x,y,width,height);
  //在画布上剪切图像，并在画布上绘制被剪切的部分
  context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
  

第3章 实现刮刮卡效果

第1节 页面效果

image-20190408165215300.png

第2节 思路分析

• 添加画布
• 随机生成卡面文字
• 卡面内容存储为图片
• 鼠标移动时刮动画布