第六章   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. Intel x86_64 Architecture Background 3

    多层次的cache结构解决了CPU和DRAM之间处理速度不一致的问题,在Intel体系架构下,CPU核心和主存DRAM之间有着三层的cache.其中一层缓存L1和二层缓存L2在CPU核心(core)中 ...

  2. 理解Liang-Barsky裁剪算法的算法原理

    0.补充知识向量点积:结果等于0, 两向量垂直; 结果大于0, 两向量夹角小于90度; 结果小于0, 两向量夹角大于90度.直线的参数方程:(x1, y1)和(x2, y2)两点确定的直线, 其参数方 ...

  3. Linux内核分析 笔记六 进程的描述和进程的创建 ——by王玥

    一.知识点总结 (一)进程的描述 1.操作系统内核里有三大功能: 进程管理 内存管理 文件系统 2.进程描述符:task_struct 2.进程描述符——struct task_struct 1. p ...

  4. 期末总结:LINUX内核分析与设计期末总结

    朱国庆原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一,心得体会 关于网上听课这 ...

  5. LINUX内核分析第七周学习总结——可执行程序的装载

    LINUX内核分析第六周学习总结——进程的描述和进程的创建 张忻(原创作品转载请注明出处) <Linux内核分析>MOOC课程http://mooc.study.163.com/cours ...

  6. 结对项目https://github.com/bxoing1994/test/blob/master/源代码

    所选项目名称:文本替换      结对人:曲承玉 github地址 :https://github.com/bxoing1994/test/blob/master/源代码 结对人github地址:ht ...

  7. beta（3/7）

    团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 协助后端完成历史记录接口.美食排行榜接口 完成食堂平面图的绘制 确定web端业 ...

  8. python 生成器、列表解析式、yield、迭代器

    开局一张图总结关系 一.列表解析式 我们习惯生成列表通过list = [1, 2, 3]的方式.还有一种很方便的列表生成方式 list = [a*2 for a in range(10)],或者lis ...

  9. PAT L2-021 点赞狂魔

    https://pintia.cn/problem-sets/994805046380707840/problems/994805058485469184 微博上有个“点赞”功能,你可以为你喜欢的博文 ...

  10. window.setTimeout

    https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout