【HTML5 Canvas核心技术】第一章基础内容

158 阅读1分钟
  • <canvas>后备内容</canvas>后备内容主要是在浏览器不支持的canvas的时候才会显示该内容。
  • canvas标签背景默认是透明的
  • canvas标签上的属性widthheight上只能设置数值,设置单位是无效,不会被识别的。大小是像素。
  • canvas中有两套尺寸,一个是元素本身,另一个是绘图表面对象。在标签上设置宽高是同时在这两个尺寸上设置宽高,通过在css上给元素上设置属性只是给元素本身而绘图表面对象还是之前的尺寸。浏览器会自动对绘图对象进行拉伸至canvas标签大小,于是绘图对象就会出现拉伸的情况。
  • canvas标签有两个属性三个方法:width|height两个属性;getContext-返回一个绘图环境对象|toDataURL-返回数据地址|toBlob-创建一个用于表示canvas图像文件的blob对象方法
  • canvas.getBoundingClientRect返回一个canvas中的绘图表面对象,其中width大小是绘图表面对象的大小。
  • canvas采用的是立即模式,绘制之后就会立即显示到canvas上,但是会立即忘记之前的绘制内容也就是说cnavas只有当前的绘制对象内容数据之前的内容会被覆盖。可以用getImagedDataputImageData保存和恢复绘图环境中的绘图表面对象。
  • 基础数据:弧度 = 角度 * Math.PI / 180 ,角度 = 弧度 * 180 / Math.PI
  • image.png