canvas-demo刮刮乐
效果：
刮刮乐.png
代码：
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>ggl</title>
<style type="text/css">
canvas{
border: 1px solid black;
background-image: url("./少羽.jpg"); // 图片自己随便引入
background-size: 100% 100%;
}
</style>
</head>
<body>
<canvas id="chCanvas" width=500 height=500></canvas>
<script type="text/javascript">
var canvas = document.getElementById('chCanvas'); // 画布
var hb = canvas.getContext('2d'); // 画笔
hb.fillStyle = "#ccc"; // 背景色
hb.fillRect(0, 0, 500, 500); // 画布大小
hb.globalCompositeOperation = 'destination-out';
canvas.onmousedown = function(){ // 监听鼠标按下事件
canvas.onmousemove = function(e){ // 监听鼠标移动事件
hb.beginPath(); // 开始画
var e = e||window.event;
var x = e.offsetX; // 获取当前的鼠标点击的X坐标
var y = e.offsetY; // 获取当前的鼠标点击的Y坐标
hb.arc(x, y, 15, Math.PI*0,Math.PI*2); // 以点击点为中心画圆
hb.fill(); // 填充
document.onmouseup = function(){ // 鼠标抬起后清楚move事件
canvas.onmousemove = null;
}
}
}
</script>
</body>
</html>
svg根据数据而动态变化的表盘
效果:
image.png
代码：
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input{
display: block;
margin: 0 auto;
}
path#bottom{
display: block;
stroke-width: 20px;
stroke: #eee;
fill: transparent;
stroke-dasharray: 355;
}
path#top{
display: block;
stroke-width: 20px;
stroke: orange;
fill: transparent;
stroke-dasharray: 355;
stroke-dashoffset: 355;
}
svg{
stroke-linecap: round;
}
</style>
</head>
<body>
<div class="wrapper">
<input type="" placeholder="请输入变化的值，最大不超过100">
<svg width="500px" height="500px">
<path id = 'bottom' d="M 100 200 A 70 70 90 1 1 180 200"></path> //底层路径（d，M绝对路径，A画弧的7个参数（圆弧的x，y轴半径，度数，圆弧的大小，顺逆时针，终点坐标）
<path id = 'top' d="M 100 200 A 70 70 90 1 1 180 200"></path> // 顶层路径
</svg>
</div>
<script type="text/javascript">
var oSvg = document.getElementsByTagName('svg')[0],
oInput = document.getElementsByTagName('input')[0],
oPath2 = document.getElementsByTagName('path')[1],
len = oPath2.getTotalLength;
oInput.onfocus = function(){
}
oInput.onblur = function(){ // 通过失焦事件去触发
let val = Math.floor((1- oInput.value / 100)*355); // 根据百分比去计算
oPath2.style = "stroke-dashoffset:"+ val; // 根据结果展示
}
</script>
</body>
</html>
audio和video的简单使用
image.png
image.png
网友评论