在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元素的水平居中 ...
随机推荐
- 数据结构与算法---线索化二叉树(Threaded BinaryTree)
先看一个问题 将数列 {1, 3, 6, 8, 10, 14 } 构建成一颗二叉树 问题分析: 当我们对上面的二叉树进行中序遍历时,数列为 {8, 3, 10, 1, 6, 14 } 但是 6, 8 ...
- 记一次linux服务器入侵应急响应
近日接到客户求助,他们收到托管电信机房的信息,通知检测到他们的一台服务器有对外发送攻击流量的行为.希望我们能协助排查问题. 一.确认安全事件 情况紧急,首先要确认安全事件的真实性.经过和服务器运维人员 ...
- C#使用sqlite-net搭建简易的ORM
SQLite简易版ORM 首先打开项目,使用nuget搜索sqlite-net,如下图: 下载完成后,我们会多出两个文件,SQLite.cs和SQLiteAsync.cs. 我们新建一个文件夹SQLi ...
- C程序疑问解答 ——可怕的野指针
本篇为原创,禁止任何形式的他用! 一.疑问点 指针是C语言一个很强大的功能,同时也是很容易让人犯错的一个功能,用错了指针,轻者只是报个错,重者可能整个系统都崩溃了.下面是大家在编写C程 ...
- Pygame安装问题
1.首先使用如下命令: conda install -c https://conda.anaconda.org/quasiben pygame 测试报错: >>> import py ...
- 【基本数据结构-集合(set)详解】-C++
集合是数学中的一个基本概念,通俗地理解,集合是由一些不重复的数据组成的.比如 就是{1,2,3} 一个有1,2,3三个元素的集合. 在 C++ 中我们常用的集合是 set . 它包含在头文件#incl ...
- [记录]HAproxy负载均衡配置教程
HAproxy负载均衡配置教程 一.简介 haproxy是一个开源的高性能负载均衡软件:支持双机热备.虚拟主机和图形化的管理界面,自带强大的对RS健康检查功能:支持TCP(四层).HTTP(七层)应用 ...
- Dock学习（一）：容器介绍
一.什么是容器 1.容器是一种轻量级.可移植.自包含的软件打包技术,使应用程序可以在几乎任何地方以相同的方式运行.开发人员在自己的笔记本上创建并测试好的容器,无需任何修改就能够在生产系统的虚拟机.或物 ...
- ehcache的使用 Shiro与Ehcache的结合（附：EhcacheUtils）
ehcache 缓存的使用 合理的使用缓存会极大的提高程序的运行效率.切记:缓存请勿滥用. 配置ehcache与Shiro shiro初识请查看该文章 https://blog.csdn.net/py ...
- webService 的使用
webService Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和配置这些 ...