例:<canvas width=500 height=500 id="canvas">
您的浏览器不支持canvas
</canvas>
画布:默认的就是300*150的大小;
canvas画布有一个坐标轴,坐标周的原点就是0 0 点,就是左上角的点
X轴水平方向 Y周就是垂直方向,
设置canvas的宽和高直接在标签上写,不用写style.
所有的操作都是在js脚本里面书写;
第一步,获取画布
var canvas=document.querySelector("#canvas");
第二步,获取绘制环境,getContext("2d") 获取canvas绘制环境,参数必须传入且为2d
var ctx = canvas.getContext("2d");
lineWidth 设置线宽,
strokestyle 设置描边样式,HSL
lineJoin 设置线段交汇的样式,接收bevel(斜角) round(圆角) miter(尖角 默认值)
lineCap 设置线帽 只在端点处有效 butt无 默认的 square 方帽 round 圆帽
/* --------------------加括号的是方法,不加括号的是属性--------------------*/
closePath( ) 闭合路径,将当前正在绘制的路径闭合 ;
fill( ) 填充,
linewidth strokeStyle lineCap fillStyle 4个属性
moveTo() lineTo() fill() stroke(); 4个方法
在新图形前面写上beginPath();表示开始一条新路径的绘制,
写上beginPath();后面的图形绘制的样式等不会对前面的图形产生影响.
fillRect (x,y,w,h) 填充矩形
clearRect(x,y,w,h) 擦除 指定区域
rect(x,y,w,h) 定义矩形路径
ctx.clearRect(0,0,canvas.width,canvas.height); 清除画布,完全清除
ctx.arc(原点横坐标 , 原点纵坐标 , 半径 , )
arc(cx,cy,radius,startAngle,endAngle[,是否逆时针]);
cx,cy圆心坐标 radius半径 startAngle开始endstartAngle 结束弧度
角度转弧度公式: PI/180*角度=弧度
填充样式 ctx.fillStyle = "red";改变填充颜色
text
fillText(str,x,y) 填充文字
strokeText(str,x,y) 描边文字
font 文字属性 设置文字样式
textAligin 设置文字水平对齐方式
textBaseline 设置文字垂直对齐方式
网友评论