前端需要用到绘图技术的地方

实时的走势图 统计图表 验证码 在线画图板 HTML5游戏

canvas 像素图

绘制位图/像素图（2d）；默认为300*150的inline元素，使用width/height属性指定尺寸，但不要使用CSS样式指定宽高，样式上设置的宽高是将整个画布（包括画布内容）进行改变。

使用：

获取绘制上下文对象

var ctx = 画布对象.getContext('2d');

{ fillStyle: “#000000”// 填充样式 font: “10px sans-serif”//绘制文本所用的 字号 字体等 lineCap: “butt”//线端口 lineJoin: “miter”//线条拐点的样式 lineWidth: 1//描边、轮廓的宽度 miterLimit: 10 最大斜接长度 shadowBlur: 0//阴影模糊半径 shadowColor: “rgba(0, 0, 0, 0)”//阴影的颜色 shadowOffsetX: 0//水平的偏移量 shadowOffsetY: 0//阴影的偏移量 垂直偏移量 strokeStyle: “#000000”//描边、轮廓颜色 textAlign: “start”//文本的对其方式 textBaseline: “alphabetic”//文本对其的基线 默认值 }

清除画布原有内容 ctx.clearRect(x,y,w,h);

绘制矩形

ctx.fillRect(x, y, w, h);//填充一个矩形 ctx.strokeRect(x, y, w, h);//描边一个矩形

绘制文本

- ctx.fillText('文字', x, y);//填充文字 - ctx.strokeText('文字', x, y);//描边文字 - ctx.textBaseLine='（top/middle/bottom）';//文本基线

绘制图像

var img = new Image(); img.onload= function(){ // 图片已经加载完成了 ctx.drawImage(imgObject, x, y, w, h); } img.src = '....jpg';//请求资源 ctx.createPattern(img,'isRepeat');//背景填充

渐变

线性渐变 // 1、创建一个渐变对象 var g = ctx.createLinearGradient(x,y,x1,y1); // 2、添加颜色（色标） g.addColorStop(0, '#f00'); g.addColorStop(0.5, '#ff0'); g.addColorStop(1, '#0f0'); // 3、使用渐变对象 ctx.fillStyle = g; ctx.strokeStyle = g; 辐射渐变 ctx.createRadialGradient(起始圆x坐标, 起始圆y坐标, 起始圆半径, 结束圆x坐标, 结束圆y坐标, 结束圆半径);

路径

ctx.beginPath() 开始一条新路径 ctx.closePaht() 闭合路径，让最后一个锚点自动连接到第一个锚点

ctx.moveTo(x,y) 移动到指定点 ctx.lineTo(x,y) 从当前点到指定点绘制直线路径

ctx.arc() 绘制拱形路径 ctx.ellipse() 绘制椭圆路径 ctx.besierCurveTo 绘制贝赛尔曲线路径 （拓展）

ctx.stroke() 描边路径 ctx.fill() 填充路径 ctx.clip() 裁切

arc() 绘制拱形路径（画圆）

// 圆心的坐标 半径 起始角度 结束角度 方向（顺时针0，逆时针1） ctx.arc(100, 100, 100, 0, Math.PI * 3 / 2, 0); arcTo(B(x,y),C(x,y),圆度大小) //绘制圆角矩形

贝塞尔曲线

ctx.quadraticCurveTo(p1x, p1y, p2x, p2y);//二次贝塞尔曲线 ctx.bezierCurveTo(p1x, p1y, p2x, p2y, p3x, p3y)//三次贝塞尔曲线

绘图上下文的状态改变和恢复

ctx.translate(100, 100);//平移原点（会影响整个画布的坐标位置） ctx.rotate(Math.PI / 4);//画笔旋转，原点在坐标轴原点，坐标轴的方向会跟随旋转 ctx.scale(x,y); //画笔缩放，x y表示x、y轴方向上缩放的倍数 // 值必须大于0，比1大放大，比1小缩小，等于1不变 ctx.save() //保存绘图上下文当前的变形数据 ctx.restore() //恢复最近一次保存的画笔变形相关的状态