JS Canvas context API 画布

// Ready

var elem = document.getElementById("myCanvas");
var context = elem.getContext('2d');
 
//2D context API----线条
context.fillStyle = '#00f';  //填充色
context.fillRect(x,y,width,height); //绘制带填充的矩形
context.strokeStyle = '#f00'; //边框色或轮廓色
context.strokeRect(x,y,width,height); //绘制只有边框的矩形
context.moveTo(x,y)           //移动坐标原点
context.lineTo(x,y)           //移动坐标终点
context.clearRect(x,y,width,height); //清除部分canvas
context.lineWidth = 4 ;              //边框线
 
context.fill();
context.stroke();
注意:原点坐标不变,从当前点到下一个点画线
 
 
//2D context API----路径
context.beginPath();//开始绘制路径
 context.closePath();//结束绘制路径

context.moveTo(x,y);
context.lineTo(x,y);
context.stroke();
//moveTo表示直线的起点,lineTo直线终点,如果lineTo 前面没有moveTo方法,这lineTo等同于moveTo方法。
//stroke沿设置的路线绘制一条直线

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
 
 //绘制圆形,调用完如下方法,需要再调用context.fill()方法,如果不调用则无法看见所画的圆形
//对于画圆形轮廓也是同理需要调用context.stroke()方法
context..arc(x,y,radius,start angle,end angle,anticlockwise[false]);
// 备注: 参数anticlockwise默认值=false,其中False = 顺时针,true = 逆时针。起始角度如下图所示



//2D context API----图像
var img = new Image();
img.src = "img.gif";
context.drawImage(img,x,y,w,h,
 
context.drawImage(this, 0, 0); //设置坐标,大小不变
context.drawImage(this, 160, 0, 120, 70); //重设大小
context.drawImage(this, 8, 20, 140, 50, 0, 150, 350, 70); //切割并重设大小
 
 

//2D context API----像素级操作
createImageData;
getImageData;
putImageData;
 
//2D context API----文字
设置属性
font;
font-family;
textAlign;
textBaseline;
绘制文字
fillText("hello",0,0);
strokeText("hello",0,50);
 
//2D context API----阴影
  context.shadowOffsetX = 5;
  context.shadowOffsetY = 5;
  context.shadowBlur    = 4; //模糊程度
  context.shadowColor   = 'rgba(255, 0, 0, 0.5)';
  context.fillStyle     = '#00f';
  context.fillRect(20, 20, 150, 100);
 
 
//2D context API----颜色渐变
context.createLinearGradient(0, 0, elem.width, 0);


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王小磊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值