在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元素的水平居中 ...
随机推荐
- Oracle数据库----函数
--大小写控制函数--upperselect * from emp where job = upper('salesman'); --lowerselect * from emp where lowe ...
- 如何让使用create-react-app构建的项目在build过程中如何不生成.map文件
避免create-react-app的项目在build的过程中生成 .map 文件的方法:主要是更改 package.json 里面的 build 命令!正式进入修改步骤前,推荐安装 cross-en ...
- C语言学习书籍推荐《C Primer Plus(中文版)(第5版)》下载
普拉塔 (Prata S.) (作者), 云巅工作室 (译者) <C Primer Plus(中文版)(第5版)>共17章,介绍了C语言的基础知识,包括数据类型.格式化输入输出.运算符.表 ...
- Java学习笔记之---内部类
Java学习笔记之---内部类 (一)成员内部类 内部类在外部使用时,无法直接实例化,需要借助外部类信息才能实例化 内部类的访问修饰符可以任意,但是访问范围会受到影响 内部类可以直接访问外部类的成员, ...
- 【学习笔记】动态规划—斜率优化DP（超详细）
[学习笔记]动态规划-斜率优化DP(超详细) [前言] 第一次写这么长的文章. 写完后感觉对斜优的理解又加深了一些. 斜优通常与决策单调性同时出现.可以说决策单调性是斜率优化的前提. 斜率优化 \(D ...
- Balking设计模式
import java.io.File; import java.io.FileWriter; import java.io.IOException; import java.util.ArrayLi ...
- Web API POST [FromBody] string value 接受参数
网上看到很多关于这这个问题的解决方案,但是都不正确,我也恰巧遇到这个问题,所有把正确的解决方案写出来,希望给后来人参考,如有不同意见欢迎指正 namespace WebApi.Controllers ...
- Sublime Text 3 实现C语言代码的编译和运行
Sublime Text 3 是一款优秀的代码编辑软件.界面简洁,轻巧快速,很受大家的欢迎. 最近开始用他来编辑数据结构的C语言代码,这就需要在新建编译系统.具体方法如下: 首先: 接下来是关键的一步 ...
- 题解 P3126 【[USACO15OPEN]回文的路径Palindromic Paths】
P3126 [USACO15OPEN]回文的路径Palindromic Paths 看到这题题解不多,蒟蒻便想更加通俗易懂地分享一点自己的心得,欢迎大佬批评指正^_^ 像这种棋盘形的两边同时做的dp还 ...
- 关于tomcat-startup.bat启动失败或者一闪而过问题解决记录
一.前言 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选.对于一个初学者来说 ...