在canvas中使用其他HTML元素
做一个功能如下图，随机生成100个大小、颜色随机的小球。点击开始运动的时候，小球开始运动，然后点击停止运动的时候，小球停止运动。 点击旁边的白色或者黑色，则背景颜色变为相应的颜色。
<body>
<div id="canvas-wrapper">
<canvas id="canvas" style="border: 1px solid #aaa;display:block;margin:0 auto"></canvas>
<div id="controller">
<h1>Canvas 绘图之旅</h1>
<a href="#" id="canvas-btn">停止运动</a>
<a href="#" class="color-btn" id="white-color-btn"> </a>
<a href="#" class="color-btn" id="black-color-btn"> </a>
</div>
</div>
</body>
<style>
#canvas-wrapper {
width: 1200px;
height: 600px;
position: relative;
margin: 0 auto;
} #canvas {
border: 1px solid #aaa;
} #controller {
position: absolute;
top: 30px;
left: 30px;
background-color: rgba(0, 85, 116, 0.7);
padding: 5px 20px 25px 20px;
border-radius: 10px;
} #controller h1 {
color: #fff;
font-weight: bold;
} #controller #canvas-btn {
display: inline-block;
background-color: #8b0;
color: #fff;
font-size: 14px;
padding: 5px 15px;
border-radius: 6px;
text-decoration: none;
margin-top: 10px;
margin-right: 20px;
} #controller #canvas-btn:hover {
text-decoration: none;
background-color: #7a0;
} #controller .color-btn {
display: inline-block;
padding: 5px 15px;
border-radius: 6px;
font-size: 14px;
margin-top: 10px;
margin-right: 5px;
text-decoration: none;
} #controller .color-btn:hover {
text-decoration: none;
} #controller #white-color-btn {
background-color: #fff;
} #controller #black-color-btn {
background-color: #000;
}
</style>
<script>
var balls = []; //小球的容器
var isMoving = true; //控制小球是否运动
var themeColor = "#fff"; //控制背景颜色
window.onload = function () {
var canvas = document.getElementById("canvas"); canvas.width = 1200;
canvas.height = 600; if (canvas.getContext("2d")) { var context = canvas.getContext("2d"); //做100个大小、颜色随机的小球
for (var i = 0; i < 100; i++) {
var R = Math.floor(Math.random() * 255);
var G = Math.floor(Math.random() * 255);
var B = Math.floor(Math.random() * 255);
var radius = Math.random() * 50 + 20; aBall = {
color: "rgb(" + R + "," + G + "," + B + ")",
x: Math.random() * (canvas.width - 2 * radius) + radius,
y: Math.random() * (canvas.height - 2 * radius) + radius,
vx: (Math.random() * 5 + 5) * Math.pow(-1, Math.floor(Math.random() * 100)),
vy: (Math.random() * 5 + 5) * Math.pow(-1, Math.floor(Math.random() * 100)),
radius: radius
}
balls[i] = aBall;
} setInterval(
function () {
draw(context);
//isMoving为true的时候运行update函数，改变小球位置，小球进行运动
if (isMoving) {
update(canvas.width, canvas.height);
}
}
,
50
) //点击按钮控制按钮文字与小球是否运动
document.getElementById("canvas-btn").onclick = function (event) {
if (isMoving) {
isMoving = false;
this.text = "开始运动";
} else {
isMoving = true;
this.text = "停止运动";
}
return false;
} //点击按钮控制背景颜色
document.getElementById("white-color-btn").onclick = function (event) {
themeColor = "#fff";
return false;
} document.getElementById("black-color-btn").onclick = function (event) {
themeColor = "#000";
return false;
}
} else {
alert('您的浏览器不支持canvas,请更换浏览器尝试~')
}
} //进行绘制
function draw(cxt) { var canvas = cxt.canvas;
cxt.clearRect(0, 0, canvas.width, canvas.height); if (themeColor === "#000") {
cxt.fillStyle = "#000";
cxt.fillRect(0, 0, canvas.width, canvas.height);
} for (var i = 0; i < balls.length; i++) {
cxt.fillStyle = balls[i].color;
cxt.beginPath();
cxt.arc(balls[i].x, balls[i].y, balls[i].radius, 0, Math.PI * 2);
cxt.closePath();
cxt.fill();
}
} //控制小球运动的函数
function update(canvasWidth, canvasHeight) { for (var i = 0; i < balls.length; i++) {
balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy; if (balls[i].x - balls[i].radius <= 0) {
balls[i].vx = -balls[i].vx;
balls[i].x = balls[i].radius;
} if (balls[i].x + balls[i].radius >= canvasWidth) {
balls[i].vx = -balls[i].vx;
balls[i].x = canvasWidth - balls[i].radius;
} if (balls[i].y - balls[i].radius <= 0) {
balls[i].vy = -balls[i].vy;
balls[i].y = balls[i].radius;
} if (balls[i].y + balls[i].radius >= canvasHeight) {
balls[i].vy = -balls[i].vy;
balls[i].y = canvasHeight - balls[i].radius;
} } } </script>
在canvas中使用其他HTML元素的更多相关文章
- 在canvas中使用html元素
让div悬浮于canvas之上 使用z-index控制层及顺序 慕课网canvas demo <div id="canvas-wrapper"> <canva ...
- Canvas中鼠标获取元素并拖动技术
Silverlight拖动,需要Canvas. Canvas管网定义: 定义一个区域,在该区域中可以使用相对于该区域的坐标显式定位子元素. XAML <Canvas ...> oneOrM ...
- Canvas中如何画一条清晰的线宽为奇数（如1px逻辑像素）的线?
我在开发中使用canvas的机会不是很多,但是第一次实际使用中就遇到了问题,"很久很久以前,我自己画了一个雷达图,线宽都是1像素,但是显示效果不如期望,这才发现canvas中的画线还是有坑的 ...
- Canvas中绘制贝塞尔曲线
① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济埃曲面,其中贝济埃三 ...
- <canvas>中isPointInPath()方法在不同绘制内容中的效果
<canvas>是HTML5中新增加的一个元素,我们可以使用脚本(通常使用JavaScript)在上面绘制图形,就像个画布一样.我们可以用它来绘制图表.制作一些动画.默认大小为300px ...
- Canvas中的save方法和restore方法
初学者也许会误认为canvas中save方法是用来保存绘图状态的图形,而restore方法是用来还原之前保存的绘图状态的图形,其实不然. save():保存当前的绘图状态. restore():恢复之 ...
- 图片在 canvas 中的 选中/平移/缩放/旋转，包含了所有canvas的2D变化，让你认识到数学的重要性
1.介绍 canvas 已经出来好久了,相信大家多少都有接触. 如果你是前端页面开发/移动开发,那么你肯定会有做过图片上传处理,图片优化,以及图片合成,这些都是可以用 canvas 实现的. 如果你是 ...
- 获取鼠标在 canvas 中的位置
一般情况 一般情况下,如果需要在 canvas 中获取鼠标指针坐标,可以通过监听鼠标的 mousemove(如果只需单击时的坐标,可以用 click)事件. 当事件被触发时,我们可以获取鼠标相对于 v ...
- CSS中不定宽块状元素的水平居中显示
CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...
随机推荐
- 从零开始基于go-thrift创建一个RPC服务
Thrift 是一种被广泛使用的 rpc 框架,可以比较灵活的定义数据结构和函数输入输出参数,并且可以跨语言调用.为了保证服务接口的统一性和可维护性,我们需要在最开始就制定一系列规范并严格遵守,降低后 ...
- Azure中国CDN全球覆盖功能初探
在不久前的4月初,Azure中国官网上简短地发布了其CDN中“标准版 Zone 2”功能.一开始笔者尚有些摸不着头脑,这个“Zone 2”具体指的是什么呢?好在后来官网更新了信息描述如下: 这下就比较 ...
- 《转载黑马教程》HTML&&CSS讲义，仅供参考
今日内容: 1. HTML标签:表单标签 2. CSS: HTML标签:表单标签 * 表单: * 概念:用于采集用户输入的数据的.用于和服务器进行交互. * form:用于定义表单的.可以定义一个范围 ...
- [Usaco2007 Open]Fliptile 翻格子游戏题解
问题 B: [Usaco2007 Open]Fliptile 翻格子游戏 时间限制: 5 Sec 内存限制: 128 MB 题目描述 Farmer John knows that an intell ...
- Python入门基础(9)__面向对象编程_2
__str__方法 如果在开发中,希望使用print输出对象变量时,能够打印自定义的内容,就可以利用__str__这个内置方法了 注意:__str__方法必须返回一个字符串 class Cat(): ...
- c++小游戏——三国杀
#include<iostream> #include<time.h> #include<stdio.h> #include <stdlib.h> us ...
- Excel催化剂开源第17波-VSTO开发之ADO.Net访问Sqlserver
在Excel催化剂中,独树一帜地推出了Excel与数据库交互功能,目前仅实现了对Sqlserver的交互,在通用型插件中仅此一家,别无其他. 为何会出现这样的局面呢,原因大概有以下几大方面: 和数据库 ...
- 题解 P5367 【【模板】康托展开】
P5367 [模板]康托展开 感觉这题难度大概在绿题到蓝题之间qwq 一.洛谷日报[yummy]浅谈康托展开 如我想知道321是{1,2,3}中第几个小的数可以这样考虑 : 第一位是3,当第一位的数小 ...
- compute节点上开启服务openstack-nova-compute.service时，无法启动的解决方法
本文前一部分为本人解决问题的过程,但最终没有解决:无奈在网上找方法时,看到有网友评论说:修改controller上的guest账号密码,再重启openstack-nova-compute. ...
- MyEclipse 2016 Stable 1.0破解教程
一.下载所需文件 1. Windows最新版: MyEclipse 2016 Stable 1.0离线安装包(文件大小:1.52GB)--完整安装包,无需在线下载http://pan.baidu.co ...