JavaScript:canvas

canvas是HTML5提供的一个标签,我们可以在这个盒子区域绘画

CanvasRendderingContext2D 对象给我们提供了在canvas盒子上画图的功能

<canvas>浏览器不支持的时候,它就像个 p 标签的功能</canvas>

线

设置宽高不要通过 css 设置,通过canvas 对象的属性来设置:

获取画笔的方法:

起点(没有起点的话,默认是轨迹的第一个终点):pen.moveTo(x,y);

轨迹(上一次的终点是下一次轨迹的起点)

合并(不用写最后一条线的轨迹,直接从终点连线到起点)

轨迹的颜色(不写默认黑色):

轨迹宽度(内外一半):pen.lineWidth = 20;

填充颜色:pen.fillStyle = ”red“;

pen.fill();  // 只有封闭的填充才有效果,不写默认不填充,写了默认黑色

沿着轨迹绘制(只有轨迹是不行的,这一步才是真的绘制):pen.stroke();

新轨迹起点(第一个默认有这个方法):pen.beginPath();

弧线

pen.arc( x,y,r,起始角度,结束角度,逆顺时针 ) ;

pen.stroke( );

// x,y圆心坐标 r半径 逆顺时针填布尔值(可选)

// deg = Math.PI / 180 (deg就等于1度)

文字

文字的绘制不用加 pen.stroke( );

文字样式:pen.font = "30px  Verdana, Geneva, sans-serif";  // font 复合属性和 css 一样

绘制文字: pen.fillText( 文字内容,x,y);  // x,y文字起点

矩形

pen.fillRect( x,y,w,h);

// x,y起点 w,j 宽高

清除区域

清除: pen.fillRect( x,y,w,h);  // x,y起点 w,j 宽高

清屏: canvas.width = canvas.width ;  // 重新给画布设置宽度,整个界面就清除了,也可以达到清除的效果

图片

pen.drawImage( imgxy); //参数:除红色参数外都是可选参数

pen.drawImage( img,sx,sy,sw,sh,xy,w,h);

sx,sy:剪切相对于(原始图片左上角开始)原始图片x,y坐标

sw,sh:剪切原始图片的宽高

x,y:剪切后的图片的x,y坐标

w,h:剪切后图片的宽高

img 图片对象,可以使标签对象。

可以自己创建var img = new Image( ); img.src = 'xxx';

绘制一个等比例缩放图片: img.width:w = img.height:h

绘制一个重叠样子的图片:

for(var i=0;i<10;i++){
    pen.drawImage( img,100+20*i,100+20*i )
}

通过 setInterval( ) 函数制作动画: 定时器

换姿势画图(重点):

保存canvas画的图: toDataURL( "img/png",1);  // 保存的图片类型 保存的图片质量( 0-1 )

画布渲染画布: pen.drawImage( canvasHide,0,0);

一个用户看不见的画布画图,画好了就把这个看不见的画布画到另一个用户看得见的画布上(提升用户体验)

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值