Canvas与javaScript特效笔记
来源:互联网 发布:六度空间理论知乎 编辑:程序博客网 时间:2024/05/20 09:47
第六章 Canvas与javaScript特效笔记
q <canvas>标签的用途
HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个canvas 元素都有一个”上下文( context )” (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的 API 提供图形绘制功能。
为了能在 JavaScript 中引用元素,最好给元素设置 id;也需要给 canvas 设定高度和宽度。创建好了画布后,要准备画笔。要在画布中绘制图形需要使用 JavaScript 。首先通过 getElementById( ) 函数找到 canvas元素,然后使用getContext( )初始化上下文。此后可以使用上下文 API 绘制各种图形。目前仅有极少浏览器支持3D绘图。
<body onload="drawCanvas()">
<canvas id="cvs"
width="800" height="600">
</canvas>
</body>
function drawCanvas()
{
var canvas=document
.getElementById("cvs");
var context=canvas
.getContext("2d");
}
q 画笔颜色和粗细
Ø fillStyle 填充颜色
注:color 可以是 CSS 颜色中的任何一种。
Ø strokeStyle 绘制线条颜色。colorvalue 同上
Ø lineWidth 线条的粗细。必须是正值。默认值是 1.0
q 矩形
Ø fillRect(x, y, width, height) 画一个矩形
Ø strockRect(x, y, width, height) 画一个矩形外框
Ø clearRect(x, y, width, height) 类似于打孔效果,把某个层清除,将其成变透明区
Ø rect(x, y, width, height) x,y 新矩形的 top 和 left 值。当这个方法被调用,默认调用 moveTo(0,0)
q 绘制路径
Ø beginPath() 告诉浏览器,你要开始绘制。当 beginPath() 被调用,是另一个过程的开始。
Ø closePath() 结束一个绘制过程。相当于 html 中的结束标签。
Ø stroke() 绘制形状外框 fill() 绘制实心形状。一旦 fill() 被调用,形状的绘制将被结束,不再需要 closePath()
Ø moveTo(x, y) 描述虚拟的“画笔”放到要开始绘制的点
Ø lineTo(x, y) 绘制线条,x, y 表示线条的结束点坐标。
Ø arc(x, y, radius,startAngle,endAngle, anticlockwise) 绘制弧形、圆形。x, y 是圆的中心坐标,radius 半径,startAngle,endAngle,圆形弧度的开始点和结束点,以X轴为准,anticlockwise,逆时针旋转,boolean。
注:Angle 是靠弧度来计算的,而不是以旋转的度数来计算。
q 绘制图片
Ø drawImage(image, x, y [, width, height])
Ø 注意:
1. Imgage表示图片,或者我们的 canvas 对象。如 var img = new Image();
2. x, y 在 canvas 中放置图片的坐标,相当于 CSS 的 top, left;
3. width, height,生成图片的宽高
q 绘制圣诞树
Ø 思路:
Ø 获取context对象
Ø 调整画笔颜色和粗细
Ø 计算好圣诞树各点坐标
Ø 依次调用beginPath()、moveTo(x,y)、lineTo(x,y)、closePath()、 stroke() 方法
- Canvas与javaScript特效笔记
- SVG特效&canvas特效
- javascript特效<一>--学习笔记
- JavaScript笔记:使用canvas绘图
- 纯JavaScript实现HTML5 Canvas六种特效滤镜
- 纯JavaScript实现HTML5 Canvas六种特效滤镜
- JavaScript 页面特效笔记集【汇总】——特效分析
- JavaScript网页特效学习笔记1
- JavaScript网页特效学习笔记2
- JavaScript网页特效学习笔记3
- canvas雷达扫描特效
- html5 canvas 粒子特效
- canvas实现粒子特效
- Canvas流星雨特效
- canvas数字特效
- Canvas 渐变特效
- JavaScript学习笔记二十八:Canvas
- JavaScript for Kids 学习笔记12. Canvas
- 使用Settings Bundle为程序添加设置项
- MFC Ribbon框架禁止默认的弹出式菜单ContextMenu
- android开发 打开系统设置信息页面
- MapReduce:详解Shuffle过程
- 理解MySQL——索引与优化
- Canvas与javaScript特效笔记
- 16条技巧让你更高效使用SSH
- 检索MediaStore中的Video和其对应的缩略图信息
- JPA的查询语言—使用原生SQL
- sqlite3中的数据类型
- linux内存管理
- 【山东农大】CSDN高校俱乐部2013纳新宣讲会成功举办
- 让IE浏览器支持HTML5标准的方法
- jQuery中容易让人困惑的东西