canvas:canvas 是 html 新增, 它提供了很多的 API 供用户调用, 使得可以在网页中做出任意想做的动画样式
本章重点: canvas 如何做一个画板
演示地址: http://xchengcheng.cn/static/canvas.html
使用代码:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <meta http-equiv="X-UA-Compatible" content="ie=edge" />
- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
- <title > 随心画板 </title>
- <meta name="description" content="随你心意, 画你所想" />
- <meta name="keywords" content="随心, 画板, 画你所想" />
- <style>
- * {
- padding: 0;
- margin: 0;
- box-sizing: border-box;
- }
- HTML,
- body {
- height: 100%;
- }
- .canvas {
- position: fixed;
- top: 0;
- left: 0;
- background: #ddd;
- }
- .load {
- position: fixed;
- left: 0;
- bottom: 0;
- width: 100%;
- height: 60px;
- line-height: 60px;
- text-align: center;
- background: #fff;
- cursor: pointer;
- }
- .load:hover,
- .load:focus {
- background: #eee;
- }
- </style>
- </head>
- <body>
- <canvas class="canvas" width="800px" height="600px">
版本过低
- </canvas>
- <div class="load"> 刷新 </div>
- <script>
- console.log("小成出品");
- var load = document.querySelector(".load");
- // 点击刷新
- load.onclick = function() {
- location.reload();
- };
- </script>
- <script>
- /** @type {HTMLCanvasElement} */
- var canvas = document.querySelector(".canvas");
- if (canvas.getContext) {
- // 设置画布宽高
- canvas.setAttribute("width", document.body.offsetWidth + "px");
- canvas.setAttribute("height", document.body.offsetHeight + "px");
- // 获取 canvas 上下文
- var ctx = canvas.getContext("2d");
- // 设置画笔样式
- ctx.strokeStyle = "orange";
- ctx.lineWidth = 2;
- if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
- // 移动端
- canvas.ontouchstart = function(e) {
- ctx.beginPath();
- var x = e.changedTouches[0].clientX;
- var y = e.changedTouches[0].clientY;
- ctx.moveTo(x, y);
- canvas.ontouchmove = function(e) {
- var x = e.changedTouches[0].clientX;
- var y = e.changedTouches[0].clientY;
- ctx.lineTo(x, y);
- ctx.stroke();
- };
- document.ontouchend = function() {
- canvas.ontouchmove = null;
- };
- };
- } else {
- canvas.onmousedown = function(e) {
- ctx.beginPath();
- var x = e.clientX;
- var y = e.clientY;
- ctx.moveTo(x, y);
- canvas.onmousemove = function(e) {
- var x = e.clientX;
- var y = e.clientY;
- ctx.lineTo(x, y);
- ctx.stroke();
- };
- document.onmouseup = function() {
- canvas.onmousemove = null;
- };
- };
- }
- } else {
- alert("请升级浏览器版本");
- }
- </script>
- <script>
- var _hmt = _hmt || [];
- (function() {
- var hm = document.createElement("script");
- hm.src = "https://hm.baidu.com/hm.js?3a311123b2a6fb77f7d9d9a66e220f2c";
- var s = document.getElementsByTagName("script")[0];
- s.parentNode.insertBefore(hm, s);
- })();
- </script>
- </body>
- </HTML>
上面代码是演示地址中案例的代码, 该案例可以在 PC 端和移动端使用, 效果是点击鼠标移动可以画出自己想要的图形.
有基础的朋友如果有兴趣可以研究下, 还是很容易看懂的, 有什么疑问的可以在评论区留言.
喜欢点赞哦
来源: http://www.bubuko.com/infodetail-3407669.html