第六章   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. Java中clone的写法

    Cloneable这个接口设计得十分奇葩,不符合正常人的使用习惯,然而用这个接口的人很多也很有必要,所以还是有必要了解一下这套扭曲的机制.以下内容来自于对Effective Java ed 2. it ...

  2. item 11: 比起private undefined function优先使用deleted function

    本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 如果你为其他开发者提供代码,并且你想阻止他们调用一个特定的函数,你 ...

  3. javascript DOM操作中的insertAdjacentHTML方法

    插入HTML内容与文本内容以前用的是innerHTML与innerText方法,今天看到insertAdjacentHTML和 insertAdjacentText两个API,特地学习一下: inse ...

  4. JQuery监听页面滚动总结

    1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offset().top; 3. ...

  5. sqlalchemy 使用pymysql连接mysql 1366错误

    一.错误情况 mysql 5.7.2 \python35\lib\site-packages\pymysql\cursors.py:166: Warning: (1366, "Incorre ...

  6. Maven的课堂笔记4

    9.Maven与MyEclipse2014结合 MyEclipse10以上的版本,对Maven支持的就比较好 9.2 Myeclipse配置 本地文件夹的C盘的.m2文件夹下必须得有这个setting ...

  7. 百度AI--自然语言处理之Java开发

    参数: public class APIConstants { //设置APPID/AK/SK public static final String APP_ID = "108***&quo ...

  8. ECSHOP广告调用广告位添加到首页顶部通栏教程

    ECSHOP广告调用广告位添加到首页顶部通栏教程 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2012-05-26   ECSHOP系统默认预留的广告位很少,如何才能 ...

  9. [转帖] “王者对战”之 MySQL 8 vs PostgreSQL 10

    原贴地址:https://www.oschina.net/translate/showdown-mysql-8-vs-postgresql-10?lang=chs&page=2# 英文原版地址 ...

  10. 关于windows内存的一些简单看法

    1. 公司的产品有一个检查windows操作系统的功能,验证是否满足 只能客户端 的运行需求: 这里面的可用虚拟内存是128T 感觉非常奇怪了. 然后自己想了下128T 是 2的 47次方 猜想是不是 ...