在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元素的水平居中 ...
随机推荐
- Spring Cloud Alibaba | 序言
目录 Spring Cloud Alibaba | 序言 1. Spring Cloud Alibaba是什么? 2. 主要功能 3. 组件 4. 版本说明 4.1 版本依赖关系 4.2 组件版本关系 ...
- 图片去水印工具：Inpaint 7.2中文专业破解版下载及使用方法
下载地址: 点我 Inpaint 是一款可以从图片上去除不必要的物体,让您轻松摆脱照片上的水印.划痕.污渍.标志等瑕疵的实用型软件:简单说来,Inpaint 就是一款强大实用的图片去水印软件,您的图片 ...
- [小米OJ] 11. 构建短字符串
思路 排序后对两个字符串遍历 function solution(line) { var str = line.split(" "); var str1 = str[0].spli ...
- [leetcode] 650. 2 Keys Keyboard (Medium)
解法一: 暴力DFS搜索,对每一步进行复制还是粘贴的状态进行遍历. 注意剪枝的地方: 1.当前A数量大于目标数量,停止搜索 2.当前剪贴板数字大于等于A数量时,只搜索下一步为粘贴的状态. Runtim ...
- python的socket模块
sk.bind(address) s.bind(address) 将套接字绑定到地址.address地址的格式取决于地址族.在AF_INET下,以元组(host,port)的形式表示地址. sk.li ...
- 安装解压版MySQL5.76及以上版本 出现服务正在启动-服务无法启动的问题
最近重装了系统,去MySQL官网下载了最新的MySQL5.7.9,我选择的是解压版,安装之后启动服务的时候,提示服务无法启动,在网上找了很多教程,弄了很久都没有弄好,后来还是决定去英文官网找找答案, ...
- 《VR入门系列教程》之5---应用方向
VR应用方向 面向消费者的虚拟现实才发展了几年,就出现了大量应用程序,虚拟现实抓住了人们对未来的渴望.开发者甚至想要把整个现实世界都做成虚拟现实,这些都是可以理解的. 但是,现在仍然没 ...
- 高级MySQL
一.MySQL的架构介绍 1.高级MySQL MySQL内核 SQL优化 MySQL服务器的优化 各种参数常亮设定 查询语句优化 主从复制 软硬件升级 容灾备份 SQL编程 2.MySQL的Linux ...
- linux初学者-磁盘加密篇
linux初学者-磁盘加密篇 因为保密需要,一般系统中会在文件和磁盘中进行加密,但是文件的加密比较容易破解,不安全.所以在特殊需要下,会对磁盘进行加密,磁盘加密后在磁盘损坏的同时,其中的数据也会损坏, ...
- jquery实现最简单的下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...