一.Web领域可以使用的绘图技术 (1)WebGL —— 强大，早已出现，不是HTML标准 (2)SVG —— 早已出现，纳入HTML5标准 (3)Canvas —— 最近出现，是HTML5标准 网页绘图可以实现的功能： (1)实时走势图 (2)统计图表 (3)在线画图板 (4)地图 (5)游戏 Canvas绘图两个难点： (1)方法名多，不好记忆 (2)坐标点值计算——小学数学+二次方程+三角函数 二.HTML5新特性之三——Canvas绘图技术 Canvas：画布，使用画笔可以在画布绘图。Canvas元素是一个300*150的inline-block。 注意：Canvas的宽和高不能使用CSS样式来设定！ <canvas id="c" width="500" height="100"> 您的浏览器Canvas标签 </canvas> //Canvas绘图技术属于JS绘图技术 var ctx = c9.getContext('2d');//获取画布上的画笔——绘图上下文对象 绘图上下文对象常用的属性： fillStyle: '#000' 填充样式 strokeStyle:'#000' 轮廓/描边样式 lineWidth: 1 描边宽度 font: "10px sans-serif" 字体 textAlign: 'start' 文本对齐 textBaseline: 'alphabetic' 文本基线 shadowColor: 'rgba(0,0,0,0) 阴影颜色 shadowBlur: 0 阴影模糊半径 shawdowOffsetX: 0 阴影的水平偏移量 shawdowOffsetY: 0 绘图上下文对象常用的方法： (1)绘制矩形 (2)绘制文本 (3)绘图路径 (4)绘图图像 三.使用Canvas绘图上下文绘制矩形 注意：矩形的定位点在自己的左上角 ctx.fillStyle = '#000'; 填充颜色 ctx.strokeStyle = '#000'; 描边颜色 ctx.lineWidth = 1; 描边线宽 ctx.fillRect(x, y, w, h) 填充一个矩形 ctx.strokeRect(x, y, w, h) 描边一个矩形 ctx.clearRect(x, y, w, h) 清除一个矩形范围内所有的内容 四.使用Canvas绘图上下文绘制文本 注意：字符串的定位点在文本基线的最左端 ctx.textBaseline = 'alphabetic' //文本基线，top / bottom / middle ctx.font = "10px sans-serif"; 字体大小 ctx.fillText( txt, x, y ) 填充文字 ctx.strokeText( txt, x, y ) 描边文字 ctx.measureText(txt).width 基于当前的字体设置，测量指定文本的总宽度 五.为图形添加阴影 ctx.shadowColor = 'rgba(255,255,0,1)'; ctx.shadowBlur = 5; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; 六.为图形添加渐变色样式 创建线性渐变对象： var g = ctx.createLinearGradient(50,150,450,150); g.addColorStop(0, '#f00'); //添加颜色点 g.addColorStop(0.5, '#ff0'); //添加颜色点 g.addColorStop(1, '#0f0'); //添加颜色点 将渐变对象应用于填充样式或描边样式 ctx.fillStyle = g; ctx.strokeStyle = g; |
