目前，前端绘图业界有两大主流技能：canvas 和 svg
本日，让我们花5分钟韶光先搞懂第一个：canvas
通过本文知识，相信聪明的你，看完一定会有收成！
canvas 基本观点
定义：是一种通过js脚本绘制路径、笔墨，图像的html5标签。兼容性：所有当代浏览器，IE9.0+把稳：1）canvas本身不具备绘图功能，必须借助 js 脚本实现。2）width 和 height 属性值必须是 px，否则会被忽略处理
canvas 语法学习
先来一张“网页绘图”的效果图：
废话不多说，直接看语法代码：（每一行都有注释，确保也能小白完备节制）
<body> <img id="myImg" src="avatar.png" width="50" height="50" style="display: none"> <canvas id="myCanvas" class="myCanvas" style="border: 1px solid #ccc;"> Sorry，您的浏览器不支持 HTML5 canvas 标签。 canvas></body><script> var canvas = document.querySelector('#myCanvas'); //得到画布 canvas.width = 600; //设置画布的宽 canvas.height = 300; //设置画布的高 var ctx = canvas.getContext('2d'); //得到ctx高下文工具（ctx具备各种图形API方法） //画赤色水平线段 ctx.moveTo(200, 280); //定义线段出发点 ctx.lineTo(400, 280); //定义线段终点（由于X轴坐标不一样，Y轴一样，所以是水平线段） ctx.strokeStyle = "#FF0000";//定义画笔颜色 ctx.stroke(); //给线段路径描边（否则不可见） ctx.closePath(); //闭合路径 //画绿色边框矩形 ctx.strokeStyle = "#00FF00";//定义画笔颜色 ctx.strokeRect(50, 50, 100, 50); ctx.closePath(); //闭合路径 //画蓝色实心框矩形 ctx.fillStyle = "#0000FF";//定义画笔颜色 ctx.fillRect(200, 50, 100, 50); ctx.closePath(); //闭合路径 //画渐变矩形 // 先创建“线性”渐变 var grd = ctx.createLinearGradient(300, 50, 500, 50); //createRadialGradient 是径向渐变 grd.addColorStop(0, "white"); grd.addColorStop(1, "red"); // 后添补渐变 ctx.fillStyle = grd; ctx.fillRect(350, 50, 100, 50); //画赤色圆形 ctx.fillStyle = "#FF0000"; ctx.arc(550, 75, 27, 0, 2 Math.PI); //四个参数分别为：x,y,r半径，开始角度（3点钟方向为0度角），结束角度（2π表示360度）（即画一个整圆） ctx.fill(); //画实心笔墨 ctx.font = "30px Arial"; ctx.fillText("Hello Html5 Canvas", 180, 250); //strokeText 是空心笔墨 //画一副图像 var img = document.getElementById("myImg"); ctx.drawImage(img, 300, 150); </script>
【全文完】--------------------------------十年技能沉淀，只做原创文章；及时关注作者，造诣大牛之路！
