canvas学习总结六:绘制矩形
来源:互联网 发布:简单装修 知乎 编辑:程序博客网 时间:2024/05/21 08:59
在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的。
立即绘制图形方法仅有两个strokeRect(),fillRect(),两个方法都是用来绘制矩形的。
Canvas的API提供了如下三个方法,分别用于矩形的清除,描边与填充
- clearRect(x, y, w, h): 清除指定区域,使其为全透明
- strokeRect(x, y, w, h): 绘制一个描边的矩形
- fillRect(x, y, w, h): 绘制一个填充的矩形
我们先来看看基于路径的绘制矩形的方法
moveTo(), lineTo()
function drawRect(){ // 描边矩形 ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(200, 20); ctx.lineTo(200, 200); ctx.lineTo(200, 200); ctx.lineTo(20, 200); ctx.lineTo(20, 20); ctx.stroke(); //填充矩形 ctx.beginPath(); ctx.moveTo(220, 20); ctx.lineTo(400, 20); ctx.lineTo(400, 200); ctx.lineTo(220, 200); ctx.lineTo(220, 200); ctx.lineTo(220, 20); ctx.fill();}
rect()绘制矩形
rect(x, y, w, h):绘制一个封闭的矩形路径
参数x, y 分别为矩形左上角的坐标,w, h 分别为矩形的宽高
function drawRect(){ ctx.beginPath(); ctx.rect(20, 20, 180, 180); ctx.stroke(); ctx.beginPath(); ctx.rect(220, 20, 180, 180); ctx.fill();}
立即绘图函数
strokeRect(x, y, w, h): 绘制一个描边的矩形
参数x, y 分别为矩形左上角的坐标,w, h 分别为矩形的宽高
function drawRect(){ ctx.strokeRect(20, 20, 180, 180);}
fillRect(x, y, w, h): 绘制一个填充的矩形
参数x, y 分别为矩形左上角的坐标,w, h 分别为矩形的宽高
function drawRect(){ ctx.fillRect(20, 20, 180, 180);}
clearRect(x, y, w, h): 清除指定区域内的所有像素
参数x, y 分别为矩形左上角的坐标,w, h 分别为矩形的宽高
清除画布的方法
ctx.clearRect(0, 0, canvas.width, canvas.height);
绘制圆角矩形
在第五章中(canvas学习总结五:线段的端点与连接点)我们介绍了lineJoin属性 用来设置线的连接点的样式,因此我们可以绘制圆角矩形
function drawRect(){ ctx.lineWidth = 13; ctx.lineJoin = 'round'; ctx.strokeRect(20, 20, 180, 180);}
当然我们还可以使用lineJoin的其他属性值绘制不同方式的矩形。我们可以自己测试一下。
总结:
路径绘制矩形
moveTo(), lineTo()绘制路径,stroke()与fill()进行描边与填充
rect(x, y, w, h)顺时针绘制路径,stroke()与fill()进行描边与填充
立即绘制矩形
strokeRect(x, y, w, h): 绘制一个描边的矩形
fillRect(x, y, w, h): 绘制一个填充的矩形
- canvas学习总结六:绘制矩形
- Canvas学习:绘制矩形
- Canvas学习(二):绘制特殊矩形
- HTML5 Canvas: 绘制矩形
- canvas绘制矩形
- canvas绘制矩形
- HTML5学习笔记之使用canvas绘制矩形
- Canvas绘制圆角矩形
- html5中canvas绘制矩形
- canvas-系统函数绘制矩形
- canvas绘制矩形、三角形、圆形
- HTML5 canvas 绘制矩形 改变矩形颜色
- canvas学习总结三:绘制路径-线段
- canvas学习总结四:绘制虚线
- Canvas绘制的总结
- html5<canvas>标签绘制矩形,线条,圆
- HTML5教程-用Canvas标签绘制矩形
- WPF使用Canvas绘制可变矩形
- jQuery Validate表单验证
- spark源码阅读一-spark-mongodb代码分析
- Linux文件信息
- 递归的应用--十进制转化为二进制
- github with SSH
- canvas学习总结六:绘制矩形
- linux常用命令
- 从请求中获取int类型参数
- git 合并其他分支的提交
- LA 5092 Permutation Counting
- Android动画之简要(一)
- javascript 面向对象编程(封装、继承)
- Android 标题栏滑动渐变背景色
- ubuntu 错误修正