画布特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布</title>
<style type="text/css">
/*CSS源代码*/
body{
background:#CFCFCF;
}
</style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">
<canvas id="Gbtags"></canvas>
</div>
<script>
/*Javascript代码片段*/
window.onload = function()
{
// 获取元素并声明2d
var canvas = document.getElementById("Gbtags");
var ctx = canvas.getContext("2d")
var W = 600, // 设置宽度
H = 400; // 设置高度
// 设置画布宽高
canvas.width = W;
canvas.height = H;
/*=========== Box ===========*/
function Box(_x,_y)
{
this.x = _x;
this.y = _y;
// 给盒子速度
this.xVel = 10 + Math.random()*20;
this.yVel = 1;
// 盒子的宽高
this.width = 30
this.height = 30;
// 我们盒子的随机颜色
this.r = Math.round(Math.random()*255);
this.g = Math.round(Math.random()*255);
this.b = Math.round(Math.random()*255);
this.rgba = "rgba("+this.r+","+this.g+","+this.b+",1)";
ctx.font = 'bold 30pt "microsoft yahei"';
ctx.fillStyle = this.rgba;
ctx.fillText('你好，极客标签', 100, 150);
this.draw = function()
{
ctx.strokeStyle = this.rgba;
ctx.strokeRect(this.x,this.y,this.width,this.height);
this.update();
}
// 为我们的盒子处理我们的逻辑功能
this.update = function()
{
if(this.x < 0) {
this.x = 0;
this.xVel *= -1;
}
if(this.x > W - this.width)
{
this.x = W - this.width;
this.xVel *= -1;
}
// check the top border
if(this.y < 0) {
this.y = 0;
this.yVel *= -1;
}
if(this.y < H - this.height)
this.yVel += .25;
// 检查底部边界
if(this.y > H - this.height)
{
// 当它反弹的底部降低球的速度
this.xVel *= .5
this.yVel *= .5
this.y = H - this.height; // 将其定位为0
this.yVel *= -1; // 使他能够反弹
}
// 添加移动速度到我们的×/y
this.x += this.xVel;
this.y += this.yVel;
}
}
// 制作盒子
var boxes = [];
//我们的屏幕上画的东西的功能：）
function draw()
{
// 背景色
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(0,0,0,0.5)"
ctx.fillRect(0,0,W,H);
ctx.globalCompositeOperation = "lighter"
for(i=0; i < boxes.length; i++)
boxes[i].draw();
update();
}
// 我们的逻辑功能
function update()
{
for(i=0; i < boxes.length; i++)
boxes[i].update();
}
// 我们指定每分钟增加一个盒子
setInterval(function(){
boxes.push( new Box(0,0))
},1000);
//设定间隔，这样我们就可以绘制然后更新我们的画布
//每30毫秒
setInterval(draw,30);
}
</script>
</body>
</html>
.
相关推荐
在本文中，我们将深入探讨"canvas特效-圆点运动连线"这一主题，它涉及JavaScript、HTML和Canvas技术。Canvas是HTML5的一个重要组成部分，提供了一种在网页上绘制图形的方法，而无需依赖于插件。JavaScript则赋予了...
html2canvas-1.0.0-rc.4版本
《Leaflet.Canvas-Markers-0.2.0：在地图上绘制高性能的canvas标记》 在Web开发中，地图已经成为一种常见的数据可视化工具，而Leaflet作为一款轻量级的JavaScript库，因其易于使用和强大的功能深受开发者喜爱。本文...
在这个名为"Canvas1-2-3-4.rar"的压缩包中，我们能看到作者通过Canvas实现了四个独特的特效，包括为控件安装动态帮助功能、添加边框、模拟电视移动字幕或图像以及创建带有阴影效果的按钮。这些特效展示了Canvas的...
- 结合canvas的toDataURL方法，可以将生成的Canvas转换为数据URL，用于发送到服务器或在社交媒体上分享。 总的来说，html2canvas@1.0.0-rc.4版本提供了一个强大且可靠的浏览器内HTML转Canvas解决方案，尤其适用于...
微信小程序canvas-drag组件是为了解决在微信小程序中对图片进行编辑的需求而设计的。这个组件基于canvas元素，提供了一种简单的方式让用户在小程序内部实现图片的拉伸、压缩和裁剪操作。通过这个组件，开发者可以...
在这个“vue-canvas-poster”项目中，我们将探讨如何结合Vue和Canvas来实现一个海报合成的功能。 首先，Vue组件是Vue.js的核心概念，它允许开发者将UI拆分成可复用的部分。在这个案例中，“vue-canvas-poster”可能...
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据...
JavaScript-Canvas-to-Blob-master库解决了这个问题，确保在这些浏览器中也能正常运行。 Blob对象是JavaScript中用来表示二进制数据的一种方式。它由一个包含二进制数据的数组和一个可选的MIME类型组成，可以用于...
标题“canvas--IE8.zip”暗示了这个压缩包文件与在Internet Explorer 8（IE8）上实现HTML5的canvas元素有关。HTML5是下一代网页标准，它引入了许多新的特性和API，canvas就是其中之一，提供了在浏览器中进行动态图形...
canvas实现--一朵超级大的玫瑰花
canvas绘制基础图形（canvas 气泡框 网格线 三角形 圆角矩形 箭头）1.初始化画布 initCanvas * 2.绘制网格线 drawGridlines * 3.绘制圆点 drawDot * 4.绘制圆环 drawRing
标题中的"html2canvas-rc4.js和html2canvas.min.js"指的是HTML2canvas的两个不同版本。"rc4"通常代表Release Candidate 4，这是软件发布前的一个测试版本，而".min.js"则意味着这是一个经过压缩和优化的版本，适合在...
见http://blog.csdn.net/carllucasyu/article/details/79022775
"CanvasLayer-gh-pages.zip" 文件提供了一个基于百度地图API的解决方案，用于实现渐变色轨迹的显示。这是一个JavaScript技术的应用，主要用于增强地图的可视化效果，尤其适用于展示动态轨迹数据，如车辆行驶路径、...
安装包，亲测可用
这个“前端项目-javascript-canvas-to-blob.zip”包含了一个示例项目，帮助开发者理解并应用这一功能。 该项目的核心在于`canvas.toBlob()`方法。这个方法接收一个回调函数作为参数，当转换完成时，会将生成的Blob...
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvas-to-blob/3.6.0/canvas-to-blob.min.js"> ``` 4. 使用Canvas to Blob的`canvas.toBlob`方法将data URL转换为Blob对象。 ```javascript canvas.toBlob...
资源分类：Python库 所属语言：Python 资源全名：streamlit_drawable_canvas-0.5.1-py3-none-any.whl 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059