canvas
Posted zhangzhengyang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #canvas{ 8 border: 1px solid #ccc; 9 display: block; 10 margin: 0 auto; 11 } 12 </style> 13 </head> 14 <body> 15 <canvas id="canvas" width="600" height="400"></canvas> 16 <script> 17 // 1. 获取画布 18 let canvas = document.querySelector(‘#canvas‘); 19 // 2. 获取上下文 绘制的工具箱 20 let ctx = canvas.getContext(‘2d‘); 21 // 3. 移动画笔 22 ctx.moveTo(100, 100); 23 // 4. 绘制直线 24 ctx.lineTo(300, 100); 25 // 5. 描边 26 ctx.stroke(); 27 </script> 28 </body> 29 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #canvas { 8 border: 1px solid #ccc; 9 display: block; 10 margin: 0 auto; 11 } 12 </style> 13 </head> 14 <body> 15 <canvas id="canvas" width="600" height="400"></canvas> 16 <script> 17 // 1. 获取画布 18 let canvas = document.querySelector(‘#canvas‘); 19 20 // 2. 获取上下文 绘制的工具箱 21 let ctx = canvas.getContext(‘2d‘); 22 23 // 3.变量 24 let space = 20, arrowSize = 10; 25 let cWidth = ctx.canvas.width; 26 let cHeight = ctx.canvas.height; 27 // console.log(cWidth, cHeight); 28 // 起始点 29 let x0 = space, y0 = cHeight - space; 30 31 // 4. 绘制x轴 32 ctx.beginPath(); 33 ctx.moveTo(x0, y0); 34 ctx.lineTo(cWidth - space, y0); 35 // 箭头 36 ctx.lineTo(cWidth - space - arrowSize, y0 + arrowSize / 2); 37 ctx.lineTo(cWidth - space - arrowSize, y0 - arrowSize / 2); 38 ctx.lineTo(cWidth - space, y0); //三个点 39 // 填充 40 ctx.fill(); 41 // 描边 42 ctx.stroke(); 43 44 // 5. 绘制y轴 45 ctx.beginPath(); 46 ctx.moveTo(x0, y0); 47 ctx.lineTo(space, space); 48 // 箭头 49 ctx.lineTo(space + arrowSize / 2, space + arrowSize); 50 ctx.lineTo(space - arrowSize / 2, space + arrowSize); 51 ctx.lineTo(space, space); 52 // 填充 53 ctx.fill(); 54 ctx.stroke(); 55 </script> 56 </body> 57 </html>
以上是关于canvas的主要内容，如果未能解决你的问题，请参考以下文章
HTML5 Canvas 支持和 Android Webview