canvas的方法: beginPath():开始绘制 moveTo(x,y):创建一个点,不绘制线条 lineTo(x,y):创建一个点并且绘制相应坐标的线条 rect(x,y,width,height):绘制矩形 fillRect(x,y,width,height):绘制填充颜色的矩形 strokeRect(x,y,width,height):绘制无填充颜色的矩形 arc( x , y , r , startAngle , endAngle ):绘制圆形 stroke():绘制已经描绘的图形、线条等 fill() :填充已经描绘的图形、线条等,可以与 fillStyle = "color"配合使用 fillText(text,x,y):填充文字,用fillFont = "字体"设置文字属性 drawImage(img,width,height): 绘制图片 绘图步骤: 1、判断浏览器是否支持canvas 2、找到canvas元素,创建context对象 3、开始绘图 html : <canvas id="canvas" width = "300" height = "300" ></canvas> script : var c = document.getElementById("canvas"); var ctx = getContext("2d"); //绘制一个矩形 ctx.beginPath(); ctx.rect(10,10,50,50); ctx.stroke(); //绘制一个圆形 2*Math.PI表示360° ctx.beginPath(); ctx.arc(150,150,50,0,2*Math.PI); ctx.stroke(); |
|
来自: 昵称48150459 > 《web前端》