canvas初探2
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的更多相关文章
- canvas初探3:画方画圆
绘制矩形的方法,strokeRect().fillRect()及clearRect(). 方法 描述 strokeRect(double x,double y,double w,double h) 使 ...
- canvas初探1
刚申请的博客,当然这也是第一篇.对于canvas也是刚开始着手进行学习,有哪些不对的地方,还望看到本篇博文的朋友指正. 1.canvas的历史 首先,它是HTML5的一个标签. 它是为了客户端矢量图形 ...
- HTML5 Canvas 初探
仅仅只是一个简单的hello world. js代码很简单: <!DOCTYPE HTML> <html lang="cn"> <head> & ...
- Web基础 HTML CSS JS JQuery AJAX
1. Web基础 网页的骨骼HTML 什么是HTML超文本标记语言:Hyper Text Markup Language 这都不重要,重要的是:HTML是Web网页的基本组成部分HTML中定义的元素, ...
- 初探canvas
canvas是html5新增的一个专用于图形处理的标签,利用canvas可以实现大部分图形操作canvas的一些基本操作与其他图形编程工具类似,包含:各种形状的边框.路径绘制和填充,画布属性调整,样式 ...
- Canvas标签初探
学了一点基础知识,感觉好神奇,全部练习代码 <html> <head> <meta http-equiv=Content-Type content="text/ ...
- 初探Javascript之Canvas
什么是Canvas <canvas>是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形. canvas是一个矩形区域,您可以控制其每一像素. 引入Canvas ```ht ...
- ReactNative学习实践--动画初探之加载动画
学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...
- Android中滑屏初探 ---- scrollTo 以及 scrollBy方法使用说明
今天给大家介绍下Android中滑屏功能的一个基本实现过程以及原理初探,最后给大家重点讲解View视图中scrollTo 与 scrollBy这两个函数的区别 . 首先 ,我们必须明白在Android ...
随机推荐
- Swift - 代码创建NSLayoutConstraint布局
NSLayoutConstraint参数说明: /** * 创建约束 NSLayoutConstraint 参数 说明: * item 自己 * attribute * relatedBy 大于等于 ...
- Windows平台手动卸载Oracle Server【完整+干净】
使用Oracle自带的Universal Installer卸载存在问题: 不干净,不完全,还有一些注册表残留,会影响到后来的安装. 所以,推荐使用手工卸载Oracle. 1.[win+R]-> ...
- 转:IT公司的十大内耗,别说你公司没有!
这篇文章是以前看到的,觉得写得非常好,转载在自己BLOG作为记录.原文:http://www.pmtoo.com/news/2015/0108/7260.html. 当企业发展到一定时期时,会不可避免 ...
- 制作bat脚本,抓取Android设备logcat
::bat制作抓取Android设备的logcat,并保存以时间命名的txt文件至设备目录 1 @ECHO off adb wait-for-device ECHO 正在连接设备 adb logcat ...
- CGI与fastcgi与php-fpm与php-cgi的关系
cgi是一个协议,它规定了服务器Nginx会将那些数据传送给PHP-cgi fastcgi也可以说是一个协议.fastcgi是对cgi的性能的一次提高.fastcgi会先启动一个master,解析配置 ...
- webform Repeater、地址栏传值、Response
Repeater: 重复器 Repeater中有五个模板,这里需要注意的是4个 <HeaderTemplate> - 开头,只执行一次的内容 <ItemTemplate> - ...
- Effective C++ 笔记2(构造,析构,赋值)
条款5:了解C++默默编写并且调用了哪些函数 1. 构造函数,析构函数,拷贝赋值函数,拷贝构造函数. class Empty { public: //默认构造函数 Empty(){}; //拷贝构造 ...
- Print a Binary Tree in Vertical Order
http://www.geeksforgeeks.org/print-binary-tree-vertical-order/ package algorithms; import java.util. ...
- PHP用户注册与登录【1】
需求分析 主要功能分为 用户注册.用户登录.用户退出.用户中心 四个部分. 用户注册 用户注册主要功能有: 注册信息表单填写界面 javascript 脚本初步检测用户输入的注册信息. 注册处理模块检 ...
- 使用js_md5加密密码
为什么在传输过程中要用md5对密码进行加密? 众所周知,我们在表单中的输入框输入了密码后,如果采用ajax的post或者get方式提交数据,在浏览器的newwork中就可以看到我们向后台传输的内容,其 ...