Canvas与javaScript特效笔记
第六章 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特效笔记的更多相关文章
- JavaScript特效（调试笔记）
JavaScript特效 一.在网页上显示当前的时间日期,例如:“2016年3月26日 星期六”. js源代码: function getTime() { var today = new Date() ...
- 用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
- 使用 Canvas 和 JavaScript 创建逼真的下雨效果
HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...
- JavaScript基础笔记二
一.函数返回值1.什么是函数返回值 函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...
- JavaScript基础笔记一
一.真假判断 真的:true.非零数字.非空字符串.非空对象 假的:false.数字零.空字符串.空对象.undefined 例: if(0){ alert(1) }else{ alert(2) } ...
- HTML5 canvas生成图片马赛克特效插件
HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...
- Bring Your Charts to Life with HTML5 Canvas and JavaScript
Bring Your Charts to Life with HTML5 Canvas and JavaScript Bring Your Charts to Life with HTML5 Canv ...
- Canvas API -- JavaScript 标准参考教程（alpha）
Canvas API -- JavaScript 标准参考教程(alpha) Canvas API
- Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
随机推荐
- NOI Day2线上同步赛崩盘记
Preface 蒟蒻愉快的NOI线上赛Day2之行,不过因为太菜就凉了 这次由于策略&&网络的问题,最后两题都没有交,结果就靠T1稳住拿了75分就回家了. 我真是太菜了. 屠龙勇士 首 ...
- PV原语操作详解
from http://www.blogjava.net/wxqxs/archive/2009/05/10/277320.html PV原语通过操作信号量来处理进程间的同步与互斥的问题.其核心就是一段 ...
- .net core 中使用httpclient,HttpClientFactory的问题
Microsoft 在.Net Framework 4.5中引入了HttpClient,并且是在.NET服务器端代码中使用Web API的最常用方法.但它有一些严重的问题,如释放HttpClient对 ...
- kill方法
删除磁盘上的文件. 语法 Kill 路径名 所需的_路径名_参数是一个字符串表达式,指定要删除的一个或多个文件名. _Pathname_可能包括驱动器和目录或文件夹. 例子删除当前路径下的TXT文档 ...
- Python数据类型-7
什么数据类型. int 1,2,3用于计算. bool:True,False,用户判断. str:存储少量数据,进行操作 'fjdsal' '二哥','`13243','fdshklj' '战三,李四 ...
- php ajax登录注册
用户登录与退出功能应用在很多地方,而在有些项目中,我们需要使用Ajax方式进行登录,登录成功后只刷新页面局部,从而提升了用户体验度.本文将使用PHP和jQuery来实现登录和退出功能. 准备数据库 本 ...
- Linux内核分析（第八周）
进程的切换和系统的一般执行过程 一.进程切换的关键代码switch_to分析 1.进程调度与其时机分析 分类: 第一种分类 I/O-bound:频繁的进行I/O:会花很多时间等待I/O操作完成 CPU ...
- html 空白汉字占位符　
在爬取京东评论时,复制html内容,发现文本中有些空格的宽度没见过.后来用htmlParser解析html页面时,发现这些空格都被替换为 . 12288是Unicode编码,&#表示宋体,&a ...
- enumerate()函数用法
enumerate 函数用于遍历序列中的元素以及它们的下标:
- Java WebDriver 使用经验
0x00 背景 WebDriver作为Selenium项目的工具之一,可以高效的操作各类主流浏览器包括诸如:chrome.IE.Firefox.Safari,并同时支持windows和*nux系统.W ...