第六章   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. (原创)odoo关系字段在视图中的行为控制 总结

    字段类型 选项或属性 格式示例 描述 many2one , many2many_tags(widget) no_create options='{"no_create":True} ...

  2. 面试3——java集合类总结（List）

    1.集合类 数组:可以存储对象,也可以存储基本数据类型,但是一次只能存储一种类型,且长度一定,不可改变. 集合:只能存储对象,长度可变,可以存储不同类型的对象.Java集合类主要有三种:set,lis ...

  3. dp方法论——由矩阵相乘问题学习dp解题思路

    前篇戳:dp入门——由分杆问题认识动态规划 导语 刷过一些算法题,就会十分珍惜“方法论”这种东西.Leetcode上只有题目.讨论和答案,没有方法论.往往答案看起来十分切中要害,但是从看题目到得到思路 ...

  4. C#_图片存取数据库Winform

    #region 用于在PictureBox控件中显示选择的图片        /// <summary>        /// 用于在PictureBox控件中显示选择的图片        ...

  5. Nginx 负载均衡的Cache缓存批量清理的操作记录

    1)nginx.conf配置 [root@inner-lb01 ~]# cat /data/nginx/conf/nginx.conf user www; worker_processes 8; #e ...

  6. [LeetCode] 307. Range Sum Query - Mutable 解题思路

    Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclusive ...

  7. Microsoft Visual Studio2013安装及单元测试

    和大家分享一下我安装VS2013和单元测试的过程.VS是微软多种编程软件的集合,功能与工作环境更全面,相比VC++6.0来说是一个很大的提升. VS安装: VS的安装和普通软件相同,只是花费的时间很长 ...

  8. 5 questions

    1.软件开发中有哪几种过程模型? 2.详细设计有哪几种描述方法? 3.什么是需求分析? 4.软件设计的基本原理包括哪些内容? 5.简述文档在软件工程中的作用? 逸翔.

  9. 《Linux内核设计与实现》第4章读书整理

    第四章   进程调度 4.1多任务 无论在单处理器或者多处理机器上,多任务操作系统都能使多个进程处于堵塞或者睡眠状态. 非抢占式多任务:除非进程自己主动停止运行,否则它会一直执行. 抢占式多任务:进程 ...

  10. 《Linux内核分析》第六周学习小结

    进程的描述和进程的创建 一．进程的描述 进程描述符task_struct数据结构: (1)操作系统的三大功能: 进程管理.内存管理.文件系统 (2)进程的作用: 将信号.进程间通信.内存管理和文件系统 ...