HTML5 Canvas绚丽的小球详解
实例说明:
- 实例使用HTML5+CSS+JavaScript实现小球的运动效果
- 掌握Canvas的基本用法
技术要点:
- 从需求出发 分析Demo要实现的功能
- 擅于使用HTML5 Canvas 参考手册
主要分为两个部分:
- 静态布局:小球的设计,包括小球的位置、颜色、大小和大小变化情况等,初始化小球的函数,渲染函数,Update函数
- 动态主体:变量、数组的的定义,小球显示时长定时,鼠标移动触发小球运动的函数
代码部分:
canvas标签,提供绘图的画布
js逻辑:静态小球
其中,_init()函数设计小球的位置、颜色、速度、大小和大小变化,render()函数绘制小球,update()函数更小小球的变化
js逻辑:动态设计
var canvas = document.getElementById("canvas"); 获取canvas元素
画布的布局:
var ctx = canvas.getContext("2d"); 用于在画布上绘图的环境,返回的是环境对象,参数表示画布上绘制的类型,"2d"表示二维绘图。
移动鼠标,触发小球显示的时间限制:
绑定鼠标移动事件:
动态设计全部代码:
效果图:
注意:本实例用到一个JavaScript实用库Underscore,提供了类似Prototype.js的一些功能,但是没有继承任何JavaScript内置对象。它弥补了部分jQuery没有实现的功能,同时又是Backbone.js必不可少的部分。
HTML5 Canvas绚丽的小球详解的更多相关文章
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- html5的float属性超详解(display,position, float)(文本流)
html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照 ...
- Canvas入门到高级详解(中)
三. canvas 进阶 3.1 Canvas 颜色样式和阴影 3.1.1 设置填充和描边的颜色(掌握) fillStyle : 设置或返回用于填充绘画的颜色 strokeStyle: 设置或返回用于 ...
- html5中viewport与meta详解
网上解释手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中 ...
- Canvas入门到高级详解(上)
神奇的 canvas--AICODER 全栈培训 IT 培训专家 一.canvas 简介 1.1 什么是 canvas?(了解) 是 HTML5 提供的一种新标签 <canvas>< ...
- 【HTML5】Canvas之globalCompositeOperation属性详解
globalCompositeOperation即Canvas中的合成操作. 1.source-over 这是默认值,他表示绘制的图形将画在现有画布之上 <!DOCTYPE html> & ...
- Canvas入门到高级详解(下)
四. Canvas 开发库封装 4.1 封装常用的绘制函数 4.1.1 封装一个矩形 //思考:我们用到的矩形需要哪些绘制的东西呢? 矩形的 x.y坐标 矩形的宽高 矩形的边框的线条样式.线条宽度 矩 ...
- HTML5全局属性和事件详解
属性: HTML5属性能够赋给标签元素含义和语境,下面的全局属性可用于任何 HTML5 元素. 属性 描述 contenteditable 规定是否允许用户编辑内容. contextmenu 规定元素 ...
随机推荐
- 使用tp访问数据库时提示错误: 'PDO' not found, 和not defined constant mysql_attr_init_command 和call an undefined function Think\Template\simpleXml_load_string()函数
第一个问题: PDO not found 是因为 php没有安装pdo扩展, 无法提供给 php 以 数据库访问功能, 所以 报错是在文件: Think/Db.class.php的里面. 解决方法是: ...
- UVA1030 Image Is Everything
思路 如果两个面看到颜色不同,则这个正方体一定要被删掉 然后依次考虑每个面即可 注意坐标的映射 代码 #include <cstdio> #include <algorithm> ...
- 什么时候使用“RCC_APBXPeriph_AFIO”
什么时候需要开启复用时钟: (1)使用EXTI (2)重映射(用到外设的重映射功能时才需要使能AFIO的时钟) 举例:重映射USART2 USART2的TX/RX在PA.2/3.但是,PA.2已经被T ...
- Python初次实现MapReduce——WordCount
前言 Hadoop 本身是用 Java 开发的,所以之前的MapReduce代码小练都是由Java代码编写,但是通过Hadoop Streaming,我们可以使用任意语言来编写程序,让Hadoop 运 ...
- 【VS2019】F12跳转到源码
1.工具->选项 2.文本编辑器->C#->高级->勾选支持导航到反编译源码 3.关闭浏览器不停止项目
- DAY 21内存处理与正则
一.python的垃圾回收机制 1.引用计数(垃圾回收机制的根本) 1.引用计数是用来记录值的内存地址被记录的次数的 2.每一次对值地址的引用都可以使该值的引用计数+1 3.每一次对值地址的释放都可以 ...
- efk学习整理
概念 Logstash 数据收集处理引擎.支持动态的从各种数据源搜集数据,并对数据进行过滤.分析.丰富.统一格式等操作,然后存储以供后续使用. kibana 可视化化平台.它能够搜索.展示存储在 El ...
- 【原】HDMI输出接口传输速率计算
1.1080P60为例: 三组差分线 R.G.B,每组速率: R:1920x1080(像素)x10(有效位为8bit,按10bit传输)x60(帧率)= 1244160000 ~~1.25G bit/ ...
- spring boot2 kafka
一.软件版本 1.linux:centos6 2.zookeeper:zookeeper-3.4.1 3.kafka:kafka_2.12-2.2.0 4.jdk:1.8 5.instelliJ Id ...
- gpu相关
1.查看cuda版本 cat /usr/local/cuda/version.txt 2.查看cudnn版本 cat /usr/local/cuda/include/cudnn.h | grep CU ...