第六章   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特效笔记的更多相关文章

  1. JavaScript特效（调试笔记）

    JavaScript特效 一.在网页上显示当前的时间日期,例如:“2016年3月26日 星期六”. js源代码: function getTime() { var today = new Date() ...

  2. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  3. 使用 Canvas 和 JavaScript 创建逼真的下雨效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...

  4. JavaScript基础笔记二

    一.函数返回值1.什么是函数返回值    函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...

  5. JavaScript基础笔记一

    一.真假判断 真的:true.非零数字.非空字符串.非空对象 假的:false.数字零.空字符串.空对象.undefined 例: if(0){ alert(1) }else{ alert(2) } ...

  6. HTML5 canvas生成图片马赛克特效插件

    HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...

  7. 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 ...

  8. Canvas API -- JavaScript 标准参考教程（alpha）

    Canvas API -- JavaScript 标准参考教程(alpha) Canvas API

  9. Java程序猿的JavaScript学习笔记（汇总文件夹）

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

随机推荐

  1. 重装系统之制作U盘启动盘

    准备: 1.需要一个大于4G的U盘. 2.一个原版系统. 3.制作U盘启动盘的工具—ultraliso. 一.一个大于4G的U盘 制作启动盘将会格式化U盘,记得做好备份. 二.一个原版系统 至于你要装 ...

  2. python winpdb远程调试

    1.使用rpdb2.start_embedded_debugger ,注意要将参数fAllowRemote 设置为True 2.winpdb前端GUI使用python2 3.rpdb兼容python2 ...

  3. [Spark][Python]Spark 访问 mysql , 生成 dataframe 的例子：

    [Spark][Python]Spark 访问 mysql , 生成 dataframe 的例子: mydf001=sqlContext.read.format("jdbc").o ...

  4. 基于HTML5 Canvas的工控SCADA模拟飞机飞行

    昨天看到一篇文章说是学习如何开飞机的,然后我就想,如果我也可以开飞机那就好玩了,每个人小时候都想做飞行员!中国飞行员太难当了,再说也不轻易让你开飞机!后来我就想如果能用 HT 开飞机那就是真的有趣了, ...

  5. Linux lsof 命令

    lsof(list open files)是一个查看进程打开的文件的工具. 在 linux 系统中,一切皆文件.通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以 lsof 命令不仅可以查 ...

  6. Linux ugo 权限

    Linux 系统中文件的 ugo 权限是 Linux 进行权限管理的基本方式.本文将介绍 ugo 权限的基本概念.说明:本文的演示环境为 ubuntu 16.04. 文件的所有者和组 Linux 文件 ...

  7. 有道云笔记导入txt文件的方法

    有道云笔记pc版迷之不能导入txt文件 尝试很多方法后发现 通过网页版 有道云 可以直接上传 但是pc版不能查看而移动端可以查看 很迷~

  8. 修改docker的地址为阿里云源

    https://blog.csdn.net/jacabe/article/details/78575316

  9. 北航MOOC客户端

    我们的团队作业终于完成了,欢迎下载使用我们的北航MOOC手机客户端软件(Android端)——北航学堂,学习北航的公开课程. 安装包下载地址: http://pan.baidu.com/s/1jGvH ...

  10. Scrum Meeting NO.10

    Scrum Meeting No.10 1.会议内容 2.任务清单 徐越 序号 近期的任务 进行中 已完成 1 "我"回答过的问题 -- 界面 √ 2 "问题" ...