canvas

1. 什么是canvas

  • HTML5提供的一种新标签, ie9才开始支持的
  • canvas是一个矩形区域的画布,可以用JS控制每一个像素在上面绘画。
  • canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图功能。
  • canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法.

2 标签语法和属性

  • 单位: px,可以设置width和height属性,否则忽略单位。
  • width和hegiht:默认300*150像素(一般情况下都要手动设置width和height)
  • 注意
  • 不要用CSS控制它的宽和高,会导致内部图片被拉伸
  • 重新设置canvas标签的宽高属性会让画布擦除所有的内容,
  • 可以给canvas画布设置背景色

3 浏览器不兼容处理

  • ie9以上才支持canvas, 其他chrome、Safari、Opera等都支持

  • 只要浏览器兼容canvas,那么就会支持绝大部分api(个别最新api除外)

  • 移动设备几乎支持canvas的所有API

  • 2d的支持的都非常好,3d(webgl)ie11才支持,其他都支持

  • 如果浏览器不兼容,最好进行友好提示, 例如

      <canvas id="canvas">
      你的浏览器不支持canvas,请升级浏览器.浏览器不支持,显示此行文本
      </canvas>
    
  • 如果浏览器不兼容,可以使用flash等方式进行替换。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,846评论 2 32
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 4,018评论 3 40
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    J_L_L阅读 1,655评论 0 4
  • 一、简介 HTML5 中的定义:“它是依赖分辨率的位图画布,你可以在 canvas 上面绘制任何图形,甚至加载照片...
    destiny0904阅读 10,779评论 1 4
  • 2月11-13日 河北邢台 2月14-17日 北京东 燕郊 何谓【心教能父母】 拥有适合孩子发展的教育...
    文峰区心协阅读 1,864评论 0 1

友情链接更多精彩内容