本帖最后由 小鲁哥哥 于 2018-5-24 11:31 编辑
【济南校区】前端就业班笔记Canvas（三）
绘制形状绘制图形不仅仅是利用线条来实现绘图, 还可以有快捷的绘制图形的办法 绘制矩形绘制矩形的方法 - CanvasRenderingContext2D.strokeRect
- CanvasRenderingContext2D.fillRect
- CanvasRenderingContext2D.rect
注意: rect 方法就是矩形路径, 还需要使用 fill 或 stroke 才可以看到效果. 因此一般使用 strokeRect 或 fillRect 直接可以看到结果. 清除矩形区域 - CanvasRenderingContext2D.clearRect
绘制矩形框语法: CanvasRenderingContext2D.strokeRect( x, y, width. height ) 描述: - 用来绘制一个矩形. 比起直接使用 moveTo 和 lineTo 方法要简单许多.
- 该方法的前两个参数表示绘制矩形的左上角的坐标. 后两个参数表示这个矩形的宽高.
- 使用该方法不需要使用 moveTo 方法设置起始点, 也不需要调用 stroke 等绘画方法.
- 绘制的矩形支持 strokeStyle 设置颜色样式.
案例 [JavaScript] 纯文本查看 复制代码 ctx.strokeStyle = 'red';
ctx.strokeRect( 100, 100, 200, 100 ); 绘制填充矩形语法: CanvasRenderingContext2D.fillRect( x, y, width. height ) 描述: - 用来绘制一个矩形. 比起直接使用 moveTo 和 lineTo 方法要简单许多.
- 该方法的前两个参数表示绘制矩形的左上角的坐标. 后两个参数表示这个矩形的宽高.
- 使用该方法不需要使用 moveTo 方法设置起始点, 也不需要调用 stroke 等绘画方法.
- 绘制的矩形支持 fillStyle 设置颜色样式.
案例 [JavaScript] 纯文本查看 复制代码 ctx.fillStyle = 'green';
ctx.fillRect( 100, 100, 200, 100 );
效果 清除矩形区域语法: CanvasRenderingContext2D.clearRect( x, y, width, height ) 描述: - 用于清除画布中的矩形区域的内容.
- 参数 x, y 表示矩形区域左上角的坐标, width 与 height 表示矩形区域的宽高.
案例 [JavaScript] 纯文本查看 复制代码 ctx.fillRect( 100, 100, 200, 100 );
ctx.clearRect( 110, 110, 50, 50 ); 效果 案例
利用绘制图形与清除矩形区域, 可以实现简单的动画. 例如代码: [JavaScript] 纯文本查看 复制代码 var x = 10, y = 10, oldx = 10, oldy = 10;[/size][/font][/color][/align][align=left][color=rgb(51, 51, 51)][font=微软雅黑][size=2] var width = 100, height = 50;
var intervalId = setInterval(function () {
ctx.clearRect( oldx - 1, oldy - 1, width + 2, height + 2 );
ctx.strokeRect( x, y, width, height );
oldx = x;
oldy = y;
x += 4;
y += 2;
if ( oldy >= 200 ) {
// clearInterval( intervalId );
x = 10, y = 10;
}
}, 20);简单效果
有时为了简单常常将整个画布都清除, 这样就不用每次计算清除的问题. [JavaScript] 纯文本查看 复制代码 ctx.clearRect( 0, 0, cas.width, cas.height );
// 也可以设置画布宽度, 这样就会自动清除
cas.width = cas.width;如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！ 黑马程序员济南中心联系电话：0531-55696830
|
收藏
淘帖
踩
