在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元素的水平居中 ...
随机推荐
- 玩转SpringBoot之整合Mybatis拦截器对数据库水平分表
利用Mybatis拦截器对数据库水平分表 需求描述 当数据量比较多时,放在一个表中的时候会影响查询效率:或者数据的时效性只是当月有效的时候:这时我们就会涉及到数据库的分表操作了.当然,你也可以使用比较 ...
- Egret入门学习日记 --- 第四篇
第四篇(学习篇) 好了,今天继续把昨天的问题解决了. 今天见鬼了. 现在界面又出来了.唯一我动过的地方,应该就是这里: 是的,我点了一下刷新.之后,不管我怎么创建新的EXML文件,放在src目录,还是 ...
- 【Aizu - 0121】Seven Puzzle （反向bfs）
-->Seven Puzzle 原文是日语 这里就直接写中文了 Descriptions: 7拼图由8个正方形的卡和这些卡片完全收纳的框构成.每张卡都编号为0, 1, 2, …, 7,以便相互 ...
- 【分治】黑白棋子的移动-C++
题目描述 有2n个棋子(n≥4)排成一行,开始为位置白子全部在左边,黑子全部在右边,如下图为n=5的情况: ○○○○○●●●●● 移动棋子的规则是:每次必须同时移动相邻的两个棋子,颜色不限,可以左移也 ...
- Lock和synchronized比较详解(转)
从Java5之后,在java.util.concurrent.locks包下提供了另外一种方式来实现同步访问,那就是Lock. 也许有朋友会问,既然都可以通过synchronized来实现同步访问了, ...
- 摄像头驱动的使能配置、V4L2编程接口的设计应用
摄像头采集子系统 一.摄像头驱动的使能配置 摄像头软件驱动构架 摄像头采集系统由上图所示,硬件(摄像头) -> 驱动(Linux内核配置中,选择支持V4L2的驱动选项) -> V4L2接口 ...
- 【Java中级】（五）异常处理
1.什么是异常 异常定义:导致程序的正常流程被中断的事件,叫做异常. 2.异常处理 try catch finally throws package exception; import java.io ...
- 《VR入门系列教程》之5---应用方向
VR应用方向 面向消费者的虚拟现实才发展了几年,就出现了大量应用程序,虚拟现实抓住了人们对未来的渴望.开发者甚至想要把整个现实世界都做成虚拟现实,这些都是可以理解的. 但是,现在仍然没 ...
- [PXE] Linux（centos6）中PXE 服务器搭建，PXE安装、启动及PXE理论详解
[PXE] Linux(centos6)中PXE 服务器搭建,PXE安装.启动及PXE理论详解 本篇blog主要讲述了[PXE] linux(centos)PXE无盘服务器搭建,安装,启动及pxe协议 ...
- C++ 过滤出字符串的中文（GBK，UTF-8）
最近在处理游戏敏感词之类的东西,为了加强屏蔽处理,所以需要过滤掉字符串中的除汉字之外的是其他东西如数字,符号,英文字母等. 首先我查阅资料并写了个函数: 示例:返回输入字符串中汉字的个数: std:: ...