HTML5 新特性之三---canvas绘图 ----- 重点&难点

目录

使用Canvas绘制--矩形，矩形定位点在自己的左上角

Canvas绘图--文本

Canvas绘图--渐变对象

Canvas绘图--路径

Canvas绘图--图像

Canvas绘图--进行变形操作

---

网页中的绘图技术

（1）SVG绘图，2D矢量图技术,2000年出现，后纳入H5标准

（2）Canvas绘图，2D位图技术，H5提出绘图技术

（3）WebGL绘图，3D绘图，尚未纳入H5标准

 

canvas: 画布，是H5提供2D绘图技术

<canvas width="500" height="400">
    您的浏览器版本太低，请更新
</canvas>

canvas标签在浏览器中默认300*150的inline-block,

画布的宽度和高智能使用html/js属性来赋值，不能用css样式来赋值

每个画布上有且只有一个“画笔”对角，对对象进行绘图

 

var ctx=canvas.getContext("2d")

 

使用Canvas绘制--矩形，矩形定位点在自己的左上角

ctx.lineWidth = 1; 描边宽度(空心)

ctx.fillStyle = "#000" 填充样式/颜色(实心)

ctx.strokeStyle = "red"; 描边样式(空心)

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

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

ctx.clearRect(x,y,w,h); 清除一个矩形范围内所有绘图

 

Canvas绘图--文本

ctx.textBaseline="top/bottom/alphabetic";

#文本基线:(垂直对齐方式)

ctx.font="12px sans-serif"; #字体大小和字体

ctx.fillText(str,x,y); 填充一段文本

ctx.strokeText(str,x,y) 描边一段文本

ctx.measureText(str) 测量文本宽度，返回对象{width:x}

 

Canvas绘图--渐变对象

线性渐变：linearGradient

径向渐变：radialGradient

（1）创建渐变对象

        var g=ctx.createLinearGradient(x1,y1,x2,y2);

（2）设置颜色点

        g.addColorStop(0