zoukankan      html  css  js  c++  java
  • HTML5 Canvas核心技术—图形、动画与游戏开发.pdf1

    canvas元素可以说是HTML5元素中功能最强大的一个,它真正的能力是通过Canvas的context对象(绘图上下文)表现出来的

    fillText()方法使用fillStyle属性来填充文本中的字符,strokeText()方法使用strokeStyle属性描绘字符的轮廓线,fillStyle属性和strokeStyle属性可以是CSS格式的颜色、渐变色或是图片

    fillText()与strokeText()方法都需要3个参数:要绘制的文本内容,以及在canvas中显示文本的横、纵坐标

    注意:在设置canvas的宽度与高度时,不能使用px后缀,取值只能是非负整数

    实际上,canvas元素有两套尺寸,一个是元素本身的大小,还有一个是元素绘图表面(drawing surface)的大小;

    直接设置元素的width与height属性时,实际上是同时修改了该元素本身大小与元素绘图表面的大小;如果通过CSS来设定canvas元素的大小,只会改变元素本身的大小,不会影响到绘图表面(默认情况下,canvas元素与其绘图表面都是300像素宽、150像素高)

    当canvas元素的大小不符合其绘图表面的大小时,浏览器就会对绘图表面进行缩放,使其符合元素的大小

    canvas元素的API,提供两个属性和三个方法

     

    cancas本身很少用到,偶尔通过它来获取canvas的宽度、高度或某个数据地址,其他的2d绘图环境属性都与绘图操作有关

    将在后面的章节中详细介绍

    JavaScript是一门动态语言,所以可以向绘图环境中添加新方法或者对已有方法进行扩充

    Canvas中,与2d绘图环境对应的是3d绘图环境叫做WebGL

    Canvas状态的保存与恢复:

    Canvas的API提供了两个名叫save()和restore()方法,用于保存及恢复当前canvas绘图环境的所有属性

    save()方法将当前的绘图环境压入堆栈顶部,restore()方法则会从堆栈顶部弹出一组状态信息,据此恢复当前绘图环境的各个状态。这意味着可以嵌套式调用这两个方法

    var canvas=document.getElementById('canvas'),  //canvas元素的引用

      context=canvas.getContext('2d');  //其绘图环境的引用

    将canvas元素的实现者称为User Agent(中文意为用户代理,简称UA)

    explorecanvas和Google Chrome Frame项目支持在IE6、7、8使用canvas

    性能分析器(Profiler)

    时间轴工具(Timeline)

    jsPerf.com(js性能测试网站)

  • 相关阅读:
    写代码如坐禅:你是哪一类程序员
    关于鸿蒙的商业讨论
    为什么你总是“把天聊死”?
    生活不易,唯有努力
    如何用一句话激怒一名程序员?
    华为正式开源方舟编译器,开源了,它真的开源了!
    为什么HTTPS比HTTP更安全?
    《管理者必读12篇》购买方法
    程序员都在用的电脑小技巧,看一遍就学会,每天早下班一小时
    一位程序员的一天工作清单:5:30下班,5:30起床
  • 原文地址:https://www.cnblogs.com/sdgjytu/p/3887749.html
Copyright © 2011-2022 走看看