第六章   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. Luogu2839 Middle 主席树、二分答案

    题目传送门:https://www.luogu.org/problemnew/show/P2839 题目大意:给出一个长度为$N$的序列与$Q$次询问,每次询问左端点在$[a,b]$,右端点在$[c, ...

  2. bitcoin源码解析 - 交易 Transcation (一)

    比特币中的交易可谓是比特币的最核心部分.比特币由交易产生,而区块就是用来存储交易的.所以,交易是比特币存在的载体,同时也是比特币中最复杂的部分.交易的运作层层相扣,各个部分缺一不可,十分严密,由此体现 ...

  3. Centos7 -- glibc 升级失败、意外删除、故意删除后的处理方法

    第一部分:测试(如果不是想测试效果,可以直接跳到第三部分) 鉴于不久前 glibc-2.29 升级失败导致一系列的工具无法正常使用,‘’ 本着研究精神的我决定删除 glibc及其库文件 ,测试影响范围 ...

  4. Spark Streaming简介及原理

    简介: SparkStreaming是一套框架. SparkStreaming是Spark核心API的一个扩展,可以实现高吞吐量的,具备容错机制的实时流数据处理. 支持多种数据源获取数据: Spark ...

  5. 分布式监控系统Zabbix-3.0.3-完整安装记录（1）

    分布式监控系统Zabbix-3.0.3的安装记录 环境说明zabbix-server:192.168.1.30     #zabbix的服务端(若要监控本机,则需要配置本机的Zabbix agent, ...

  6. PAT甲级题解-1123. Is It a Complete AVL Tree (30)-AVL树+满二叉树

    博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6806292.html特别不喜欢那些随便转载别人的原创文章又不给 ...

  7. 快速搭建BIND服务，并实现解析

    公司有测试需求,当连接一个网络后自动会进入产品的测试环境,所以搭建了一个DNS解析服务,来完成此需求. 参考:http://blog.chinaunix.net/uid-30149335-id-506 ...

  8. 【MOOC EXP】Linux内核分析实验六报告

    程涵  原创博客 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 进程的描述和进程的创建 知识点梳理: ...

  9. Linux内核分析：期中总结

    第一章:计算机是如何工作的 计算机大部分都是用冯诺依曼体系结构,即存储程序计算机. 两个层面: 1.硬件: cpu(IP寄存器:指针,指向内存的某块区域)——总线——内存(代码与数据) 2.程序员: ...

  10. github学习步骤

    组员1:    王文政      201303011159 作业网址 :https://github.com/1246251747/3/blob/master/jjj.txt 心得: 1.  申请gi ...