DVD效果展示
-----------------------------------------------------------------------------------
开发工具与关键技术:DVD效果展示 HTML css JS
作者:尘则
撰写时间:2021/6/8
先看结果:
代码如下:
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
}
#canvas {
width: 100%;
height: 100%;
}
svg {
display: none;
visibility: hidden;
}
#debug {
position: absolute;
display: block;
background: #000;
color: #fff;
font-size: 20px;
z-index: 10000;
margin: 20px;
padding: 10px 20px;
}
</style>
</head>
<body>
<!--
<div id="debug"></div>
-->
<canvas id="canvas"></canvas>
<svg xmlns="http://www.w3.org/2000/svg" id="image" viewBox="0 0 67.417 29.523"><path d="M59.646 0H43.07l-8.926 10.291L30.501 0H5.911L5 3.825h9.017c2.915 0 6.302 1.34 5.647 4.371-.729 3.37-4.19 5.01-10.474 5.01L11.011 5.1H4.727L2.04 16.758h8.516c5.601 0 13.115-1.64 15.165-7.969.551-1.702.496-3.225.11-4.508l.026-.001 5.738 16.395L46.35 3.825h9.381c2.915 0 5.618 1.33 5.01 4.371-.547 2.732-3.552 5.01-9.837 5.01L52.725 5.1H46.44l-2.687 11.658h6.968c5.601 0 14.299-1.64 16.348-7.969C68.764 3.555 63.927 0 59.646 0z"/><ellipse cx="31.686" cy="25.319" rx="31.686" ry="4.204"/><ellipse cx="48.558" cy="25.114"