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();
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。