最近在研究一些图标结构,在h5中的绘图方式感觉挺不错的,所以和大家分享一下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc } </style> </head> <body> <canvas width=600 height=400 id="c"></canvas> <script> var cas = document.querySelector("#c"); var ctx = cas.getContext("2d"); var padding = 10; var arrowHeight = 20; var arrowWidth = 8; //绘制y轴 ctx.moveTo(padding, cas.height - padding); ctx.lineTo(padding, padding); //绘制y轴的箭头 ctx.moveTo(padding - arrowWidth / 2, padding + arrowHeight);