2.2 canvas的绘图环境

canvas仅仅只是一个绘图的容器,其内存在一个绘图环境,该环境对象提供了全部的绘图功能。

目前canvas的绘图环境是2d,但canvas规范在着手准备支持其他类型的绘图环境,例如,3d绘图——WebGL。

2d绘图环境

调用2d绘图环境的代码,

canvas.getContext("2d");

2d绘图环境的属性

属性 简介
canvas 指向该绘图环境所属的canvas对象。该属性常见的用途就是获取canvas的宽度和高度,分别调用context.canvas.width与context.canvas.height。
fillstyle 指定该绘图环境在后续的图形填充操作中所使用的颜色、渐变色或图案
font 设定在调用绘图环境对象的fillText()或strokeText()方法时所使用的字体
globalAlpha 全局透明度设定,它可以取0(完全透明)~1.0(完全不透明)之间的值。浏览器会将每个像素的Alpha值与该值相乘,在绘制图像时也是如此。
globalCompsiteOperation 该值决定了浏览器将某个物体绘制在其他物体之上时,所采用的绘制方式。
lineCap 该值告诉浏览器如何绘制线段的端点。可以指定以下3个值中的任意一个:butt、round、square。默认为butt
lineWidth 该值决定了在canvas中绘制的线段的屏幕像素宽度。它必须是一个非负、非无穷的double值。默认为1.0
lineJoin 告诉浏览器在两条线段相交时如何绘制焦点。可取值:bevel、round、miter(默认值)。
miterLimit 告诉浏览器如何绘制miter形式的线段焦点
shadowBlur 该值决定了浏览器该如何延伸阴影效果。值越高,阴影效果延伸的越远。该值不是指阴影的像素长度,而是代表高斯模糊(Gaussian blur)方程式中的参数值。它必须是一个非负非无穷量的double值,默认为0
shadowColor 该值告诉浏览器使用何种颜色绘制阴影。通常使用半透明色作为该属性的值,以便让后面的背景能显示出来
shadowOffsetX 以像素为单位,指定阴影效果的水平方向偏移量
shadowOffsetY 以像素为单位,指定阴影效果的垂直方向偏移量
strokeStyle 指定了对路径进行扫描所用的绘图风格。该值可被设定为某个颜色、渐变色或图案
textAlign 决定了以fillText()或strokeText()方法进行绘制时,所画文本的水平对齐方式
textBaseline 决定了以fillText()或strokeText()方法进行绘制时,所画文本的垂直对齐方式

3d绘图环境——WebGL

它是一种3D绘图标准,这种标准允许把JavaScript和OpenGL ES 2.0结合在一起,让WebGL可以为HTML5 canvas提供硬件3D加速渲染,开发人员可以借助系统显卡在浏览器里更加流畅地展示3D场景和模型,还可以创建复杂的导航和数据视觉化。

由于还是一菜鸟,还没学到WebGL,所以在此就不详述了。

canvas初探2的更多相关文章

  1. canvas初探3:画方画圆

    绘制矩形的方法,strokeRect().fillRect()及clearRect(). 方法 描述 strokeRect(double x,double y,double w,double h) 使 ...

  2. canvas初探1

    刚申请的博客,当然这也是第一篇.对于canvas也是刚开始着手进行学习,有哪些不对的地方,还望看到本篇博文的朋友指正. 1.canvas的历史 首先,它是HTML5的一个标签. 它是为了客户端矢量图形 ...

  3. HTML5 Canvas 初探

    仅仅只是一个简单的hello world. js代码很简单: <!DOCTYPE HTML> <html lang="cn"> <head> & ...

  4. Web基础 HTML CSS JS JQuery AJAX

    1. Web基础 网页的骨骼HTML 什么是HTML超文本标记语言:Hyper Text Markup Language 这都不重要,重要的是:HTML是Web网页的基本组成部分HTML中定义的元素, ...

  5. 初探canvas

    canvas是html5新增的一个专用于图形处理的标签,利用canvas可以实现大部分图形操作canvas的一些基本操作与其他图形编程工具类似,包含:各种形状的边框.路径绘制和填充,画布属性调整,样式 ...

  6. Canvas标签初探

    学了一点基础知识,感觉好神奇,全部练习代码 <html> <head> <meta http-equiv=Content-Type content="text/ ...

  7. 初探Javascript之Canvas

    什么是Canvas <canvas>是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形. canvas是一个矩形区域,您可以控制其每一像素. 引入Canvas ```ht ...

  8. ReactNative学习实践--动画初探之加载动画

    学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...

  9. Android中滑屏初探 ---- scrollTo 以及 scrollBy方法使用说明

    今天给大家介绍下Android中滑屏功能的一个基本实现过程以及原理初探,最后给大家重点讲解View视图中scrollTo 与 scrollBy这两个函数的区别 . 首先 ,我们必须明白在Android ...

随机推荐

  1. ubuntu系统怎么分区

    首先科普下windows和linux的文件系统和主分区: 1.电脑的主分最多只有只能由四个.如果是win7和linux双系统,则windows系统可能会占到1-2个主分区,那linux最多只能有两个主 ...

  2. 设计模式之简单工厂模式Simple Factory(四创建型)

    工厂模式简介. 工厂模式专门负责将大量有共同接口的类实例化 工厂模式可以动态决定将哪一个类实例化,不必事先知道每次要实例化哪一个类. 工厂模式有三种形态: 1.简单工厂模式Simple Factory ...

  3. Stack Overflow: The Architecture - 2016 Edition(Translation)

    原文: https://nickcraver.com/blog/2016/02/17/stack-overflow-the-architecture-2016-edition/ 作者:Nick Cra ...

  4. iphone 尺寸and字体

    iPhone的APP界面一般由四个元素组成,分别是:状态栏.导航栏.主菜单栏以及中间的内容区域 这里取用 640×960 的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸: 状态栏:就是我们经常说的 ...

  5. Vue - 事件绑定

    1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...

  6. 通用js地址选择器

    用js实现通用的地址选择器,省份,城市,地区自动关联更新 点击下面查看详细代码: http://runjs.cn/code/s8sqkhcv 关键地址库代码: var addr_arr = new A ...

  7. C++Primer学习笔记(1)

    序: 为了重新扎扎实实地再深入学习一遍C++,我选择了C++ Primer这本经典.又开了这个系列的随笔,用于记录学习过程中遇到的一些有趣的问题和心得.同时,也是想通过写随笔的方式督促自己不断进步,争 ...

  8. solr4.3 java.lang.NumberFormatException

    solr java.lang.NumberFormatException 现象:定时每天全量,每隔5分钟增量DIH从mysql导入数据 solr4j返回加过Id列表,一天偶然出现 java.lang. ...

  9. VS2013开启滚动条缩略图和双击选中高亮,效果杠杠滴!

    1.双击代码或选中代码高亮,用以下插件,反应很灵敏,我安装的是第三个 2.代码编辑器的滚动条缩略图是VS自带的,需要打开菜单----工具----选项,如下图设置: 3.VS默认的选中颜色,需要打开菜单 ...

  10. 手把手教你搭建深度学习平台——避坑安装theano+CUDA

    python有多混乱我就不多说了.这个混论不仅是指整个python市场混乱,更混乱的还有python的各种附加依赖包.为了一劳永逸解决python的各种依赖包对深度学习造成的影响,本文中采用pytho ...