H5 新特性
图表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#canvas {
display: block;
margin: 0 auto;
border: 1px solid #333;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
let dataset = [
{
text: "家电用器",
sales: 210,
},
{
text: "音像制品",
sales: 125,
},
{
text: "手机通讯",
sales: 98,
},
{
text: "服装服饰",
sales: 9,
},
{
text: "家居家具",
sales: 225,
},
];
let canvasEle = document.getElementById("canvas");
let ctx = canvasEle.getContext("2d");
let width = 50;
let spacerNum = dataset.length - 1;
let spacerWidth = Math.ceil(
(canvasEle.width - dataset.length * width) / spacerNum
);
ctx.fillStyle = "#900";
ctx.font = "16px Microsoft Yahei";
ctx.textAlign = "center";
dataset.forEach((item, index) => {
let x = index * (spacerWidth + width);
let y = canvasEle.height - item.sales;
ctx.fillRect(x, y, width, item.sales);
ctx.fillText(item.sales, x + Math.floor(width / 2), y - 5);
});
</script>
</body>
</html>
IP 定位
![alt IP](/myblog/assets/IP.41067710.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>根据ip定位</title>
<link
rel="stylesheet"
href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
/>
<style type="text/css">
html,
body,
#container {
height: 360px;
width: 600px;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="info">
<p id="info"></p>
</div>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=2cc7acd5402708b09bffcd61c0b47e2a&plugin=AMap.CitySearch"
></script>
<script type="text/javascript">
var map = new AMap.Map("container", {
resizeEnable: true,
center: [114.085947, 22.547],
zoom: 13,
});
function showCityInfo() {
var citysearch = new AMap.CitySearch();
citysearch.getLocalCity(function (status, result) {
if (status === "complete" && result.info === "OK") {
if (result && result.city && result.bounds) {
var cityinfo = result.city;
var citybounds = result.bounds;
document.getElementById("info").innerHTML =
"您当前所在城市:" + cityinfo;
map.setBounds(citybounds);
}
} else {
document.getElementById("info").innerHTML = result.info;
}
});
}
showCityInfo();
</script>
</body>
</html>
canvas 高级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#canvas {
display: block;
margin: 0 auto;
border: 1px solid #333;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
let canvasEle = document.getElementById("canvas");
canvasEle.width = 600;
canvasEle.height = 360;
let ctx = canvasEle.getContext("2d");
let x = 0;
let y = 0;
let xDistance = 10;
let yDistance = 10;
let i = 0;
window.setInterval(() => {
i++;
console.log(i);
ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);
ctx.strokeRect(x, y, 100, 100);
x += xDistance;
y += yDistance;
if (x > canvasEle.width - 100 || x <= 0) {
xDistance = -xDistance;
}
if (y > canvasEle.height - 100 || y <= 0) {
yDistance = -yDistance;
}
}, 100);
</script>
</body>
</html>
canvas 随机触碰边界换背景色
![alt 03_basicAnimation.png](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAusAAAGWCAIAAABOz1roAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAAr8SURBVHic7d2/S9x5Hsfxj0f+gWlE0gxcY7grBHGKbQIp1mpdgrE7VhC0ybLVxCZYzm2TWIWkSUAwXKcS4lZesWCTQhFS3BHLaUSm+f4Jc0V+aH7Obvzq+Lo8HtV8v36/832DzdPv5/tNRvr9fgEAiPKXYQ8AAPCnXTnLyVNTU3XNAQCh9vf3hz3Ct+hMBVP82gD4tvljflisIgEAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJBHwQAAeRQMAJDnyrAHgGAjI8OeIEe/P+wJgP8v7sEAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHkUDACQR8EAAHmuDHsACNbvD3sCgG+VezAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkUTAAQB4FAwDkuXLG86empmqZAwDgjxvp9/vDngEA4M+xigQA5FEwAEAeBQMA5FEwAEAeBQMA5FEwAEAeBQMA5FEwAEAeBQMA5FEwAEAeBQMA5FEwAEAeBQMA5FEwAEAeBQMA5Lky7AEg1fHx8dbWVrfbvfhLN5vN2dnZsbGxyzkMwAUY6ff7w54BIj169OjatWuTk5MXf+mDg4NXr17dvn37cg4DcAGsIsFX6na7QymGUsrk5OQHt1su1TAAF0DBAAB5FAwAkEfBAAB5FAzUbX+1McD8xtHrQ3sbC+8+f25PLfZWG6t7766xOd9Y2OgNOqe3OT+/OfAogOHwNjXUbapdVe1SSm9z/k65v35r9PXuDzZLKaV0u88mrq+d2rH/dOlvv1RX6x5pf7dzt6w0GtMnu7bHny29+Xjz8eHa3OgnTwS4rBQMDNXNZvNko7fxsOystUrpbSyMP//h8P3c+Xp7v3dWblTt5XZ74JH3Grs3qvZULZcFOEdWkWA49u41Go3pzrOl8XfrSvtPuz+3W6WUMjq3tjOx+HRv0Jf8wUvt/jrTvFpK2ft4fcs6ERBKwcBwtJar6t8rM08Oq+rw8c1SSm+jW8r379JiulM60/dqaJje5oPOydbKTnXi8MnMl8/dXhw/VTurNRUVQA2sIkG9ehsL40vP3m1uNxZP//Tt5s3Hh2tz3d87EzfapfRKmSgv7iwtbpe7O9Vy6+3Be6uNBxv/WJ87y2MxRxt3fptYufny7XZnutE5/fOZJ/e/cPbMk9pWsgDqpWCgXqNza9XcWimDn+Tt7f535fpyKUe7z0vz/q12deuDr2q1q/WzjnPUnfj5p+bDl2+/sBr4KAxABKtIcI4mmp+/gXG0+/zZy+5R6b14Xn64Pvqph1RW9888wVT7zWO5L77wjrflISCPgoFz0tv9rTS/sAB0dW69+qX798b4Yvnxu9eh895DKjt3657o7umvP7nOSt3XAbgACgbOx/7TpfLj9QGPsLSu3y2lbC/96/xvgnzXrpbLJ+7D3Cvtqt0afD7A5aJg4Bzsrza+f/n4nwP+mbi9e43pslNV1U6Znt/sltKZPpUW07/WPlarfXKDZ+bxf6qqqk49OAyQRMFAzXqb842HzcNqwDtEvc35B389fB0QreVq/Vbz3FeRSimlt7HwyTw62d95+0b3+OL2+29TNxp1vN0NUAvvIkHNRm+tf/RW0Zv965/fLKXVrt67HdJarmq6PTI6t7Z+6vObV6U+OuaT+wEuKfdgAIA8CgYAyKNg4Cs1m82Dg4OhXPrg4KB5+n+EvGTDAFyAkX6/P+wZINLx8fHW1la32734SzebzdnZ2bGxscs5DMAFUDAAQB6rSABAHgUDAOT5H5e7wPxCgcbxAAAAAElFTkSuQmCC)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#canvas {
display: block;
margin: 0 auto;
border: 1px solid #333;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<p align="center">
<button onclick="play()">开始</button>
<button onclick="stop()">停止</button>
</p>
<script>
let canvasEle = document.getElementById("canvas");
canvasEle.width = 600;
canvasEle.height = 360;
let ctx = canvasEle.getContext("2d");
let x = 0;
let y = 0;
let xDistance = 2;
let yDistance = 1.5;
let i = 0;
let requestId;
let isPlaying = true;
let colors = ["#f00", "#0f0", "#00f", "#000", "#ff0"];
function animation() {
ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);
ctx.fillRect(x, y, 100, 100);
x += xDistance;
y += yDistance;
if (x > canvasEle.width - 100 || x <= 0) {
xDistance = -xDistance;
ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
}
if (y > canvasEle.height - 100 || y <= 0) {
yDistance = -yDistance;
ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
}
requestId = window.requestAnimationFrame(animation);
}
function stop() {
if (isPlaying == true) {
window.cancelAnimationFrame(requestId);
isPlaying = false;
}
}
function play() {
if (isPlaying == false) {
animation();
isPlaying = true;
}
}
animation();
</script>
</body>
</html>
canvas 三角形 圆形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#canvas{
display: block;
margin: 0 auto;
border:0.5px solid #333;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
let canvasEle = document.getElementById('canvas');
canvasEle.width = 600;
canvasEle.height = 360;
let ctx = canvasEle.getContext('2d');
ctx.beginPath();
ctx.moveTo(100,180);
ctx.lineTo(300,180);
ctx.lineTo(300,300);
ctx.lineTo(100,180);
ctx.stroke();
ctx.beginPath();
ctx.arc(400, 180, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>
canvas 随机触碰边界弹跳 banner
![alt banner_01](/myblog/assets/banner_01.1a9c3d79.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
p,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
#canvas {
display: block;
background: #000;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
let canvasEle = document.getElementById('canvas');
canvasEle.width = window.innerWidth;
canvasEle.height = 320;
let ctx = canvasEle.getContext('2d');
ctx.fillStyle = '#fff';
let circles = [];
class Circle{
constructor(){
this.x = Math.floor(Math.random() * canvasEle.width);
this.y = Math.floor(Math.random() * canvasEle.height);
this.radius = Math.ceil(Math.random() * 5) + 3;
this.xSpeed = Math.random() * 2 > 1 ? Math.random() * 2 : - Math.random() * 2;
this.ySpeed = Math.random() * 2 > 1 ? Math.random() * 2 : - Math.random() * 2;
}
}
function init() {
for(n =0;n<50;n++) {
let circle = new Circle();
circles.push(circle);
ctx.beginPath();
ctx.moveTo(circle.x, circle.y);
ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
ctx.fill();
}
console.log(circles);
}
function animation(){
ctx.clearRect(0,0,canvasEle.width,canvasEle.height);
for(let n=0;n<50;n++){
let circle=circles[n]
circle.x += circle.xSpeed;
circle.y += circle.ySpeed;
ctx.beginPath();
ctx.moveTo(circle.x, circle.y);
ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
ctx.fill();
if(circle.x > canvasEle.width - circle.radius || circle.x <= 0){
circle.xSpeed = - circle.xSpeed;
}
if(circle.y > canvasEle.height - circle.radius || circle.y <= 0){
circle.ySpeed = - circle.ySpeed;
}
}
window.requestAnimationFrame(animation);
}
init();
animation();
</script>
</body>
</html>
canvas 随机触碰边界弹跳 banner2
![alt banner_02](/myblog/assets/banner_02.126f2af3.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
p,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
#canvas {
display: block;
background: #000;
}
</style>
</head>
<body>
<div id=""></div>
<canvas id="canvas"></canvas>
<script>
let canvasEle = document.getElementById('canvas');
canvasEle.width = window.innerWidth;
canvasEle.height = 320;
let ctx = canvasEle.getContext('2d');
ctx.fillStyle = '#fff';
let circles = [];
class Circle {
constructor() {
this.x = Math.floor(Math.random() * canvasEle.width);
this.y = Math.floor(Math.random() * canvasEle.height);
this.radius = Math.ceil(Math.random() * 5) + 3;
this.xSpeed = Math.random() * 2 > 1 ? Math.random() * 2 : - Math.random() * 2;
this.ySpeed = Math.random() * 2 > 1 ? Math.random() * 2 : - Math.random() * 2;
}
}
function init() {
for (n = 0; n < 150; n++) {
let circle = new Circle();
circles.push(circle);
ctx.beginPath();
ctx.moveTo(circle.x, circle.y);
ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
ctx.fill();
}
console.log(circles);
}
function animation() {
ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);
for (let n = 0; n <150; n++) {
ctx.fillStyle=`rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`;
let circle = circles[n];
circle.x += circle.xSpeed;
circle.y += circle.ySpeed;
ctx.beginPath();
ctx.moveTo(circle.x, circle.y);
ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
ctx.fill();
if (circle.x > canvasEle.width - circle.radius || circle.x <= 0) {
circle.xSpeed = - circle.xSpeed;
}
if (circle.y > canvasEle.height - circle.radius || circle.y <= 0) {
circle.ySpeed = - circle.ySpeed;
}
}
connect();
window.requestAnimationFrame(animation);
}
function connect() {
for (let n = 0; n < 150; n++) {
for (let i = n + 1; i < 150; i++) {
let distance = Math.sqrt((circles[n].x - circles[i].x)*(circles[n].x - circles[i].x) + (circles[n].y - circles[i].y) * (circles[n].y - circles[i].y));
if(distance <= 50){
ctx.strokeStyle = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`;
ctx.beginPath();
ctx.moveTo(circles[n].x,circles[n].y);
ctx.lineTo(circles[i].x,circles[i].y);
ctx.stroke();
}
}
}
}
init();
animation();
</script>
</body>
</html>