黑马程序员技术交流社区
标题: 【济南校区】前端就业班笔记Canvas（二）：线型属性 [打印本页]
作者: 小鲁哥哥 时间: 2018-5-4 15:47
标题: 【济南校区】前端就业班笔记Canvas（二）：线型属性
本帖最后由 小鲁哥哥 于 2018-5-24 11:33 编辑
【济南校区】前端就业班笔记Canvas（二）
线型相关属性设置描边与填充不一定只能使用黑色的细线. 可以利用一些属性设置其效果
- CanvasRenderingContext2D.lineWidth 设置线宽.
- CanvasRenderingContext2D.lineCap 设置线末端类型.
- CanvasRenderingContext2D.lineJoin 设置相交线的拐点.
- CanvasRenderingContext2D.getLineDash() 获得线段样式数组.
- CanvasRenderingContext2D.setLineDash() 设置线段样式.
- CanvasRenderingContext2D.lineDashOffset 绘制线段偏移量.
设置线宽语法: CanvasRenderingContext2D.lineWidth = number
描述: 设置线宽.
案例
[JavaScript] 纯文本查看 复制代码
ctx.moveTo( 100, 100 );
ctx.lineTo( 300, 100 );
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo( 100, 250 );
ctx.lineTo( 300, 250 );
ctx.stroke();
效果
设置线末端类型
语法: CanvasRenderingContext2D.lineCap = value
描述:
- 设置线型末端的样式, 可取值为: 'butt'( 默认 ), 'round', 'square'.
- 'butt' 表示两端使用方形结束.
- 'round' 表示两端使用圆角结束.
- 'square' 表示突出的圆角结束.
案例
[JavaScript] 纯文本查看 复制代码
...
ctx.lineWidth = 10;
ctx.moveTo( 100, 100 );
ctx.lineTo( 300, 100 );
ctx.stroke();
ctx.beginPath();
ctx.lineCap = 'round';
ctx.moveTo( 100, 130 );
ctx.lineTo( 300, 130 );
ctx.stroke();
ctx.beginPath();
ctx.lineCap = 'square';
ctx.moveTo( 100, 160 );
ctx.lineTo( 300, 160 );
ctx.stroke();
效果
设置相交线的拐点
语法: CanvasRenderingContext2D.lineJoin = value
描述:
- 设置两条直线的拐点描述方式. 可以取值 'round', 'bevel', 'miter'(默认)
- 'round' 使用圆角连接.
- 'bevel' 使用平切连接.
- 'miter' 使用直角转.
案例
[JavaScript] 纯文本查看 复制代码
... ctx.lineWidth = 10; ctx.lineJoin = 'round'; ctx.moveTo( 100, 100 ); ctx.lineTo( 200, 200 ); ctx.lineTo( 300, 100 ); ctx.stroke(); ctx.beginPath(); ctx.lineJoin = 'bevel'; ctx.moveTo( 100, 150 ); ctx.lineTo( 200, 250 ); ctx.lineTo( 300, 150 ); ctx.stroke(); ctx.beginPath(); ctx.lineJoin = 'miter'; ctx.moveTo( 100, 200 ); ctx.lineTo( 200, 300 ); ctx.lineTo( 300, 200 ); ctx.stroke();
效果
虚线
语法:
- CanvasRenderingContext2D.lineDashOffset = number
- CanvasRenderingContext2D.getLineDash()
- CanvasRenderingContext2D.setLineDash()
描述:
- setLineDash 用于设置开始绘制虚线的偏移量. 数字的正负表示左右偏移.
- getLineDash() 与 setLineDash() 方法使用数组描述实线与虚线的长度.
演示
[JavaScript] 纯文本查看 复制代码
... ctx.moveTo( 100, 90 ); ctx.lineTo( 100, 110 ); ctx.moveTo( 300, 90 ); ctx.lineTo( 300, 110 ); ctx.moveTo( 100, 140 ); ctx.lineTo( 100, 160 ); ctx.moveTo( 300, 140 ); ctx.lineTo( 300, 160 ); ctx.moveTo( 100, 190 ); ctx.lineTo( 100, 210 ); ctx.moveTo( 300, 190 ); ctx.lineTo( 300, 210 ); ctx.stroke(); ctx.beginPath(); ctx.moveTo( 100, 100 ); ctx.lineTo( 300, 100 ); ctx.stroke(); ctx.beginPath(); ctx.setLineDash( [ 5, 5 ] ); ctx.moveTo( 100, 150 ); ctx.lineTo( 300, 150 ); ctx.stroke(); ctx.beginPath(); ctx.lineDashOffset = -2; ctx.moveTo( 100, 200 ); ctx.lineTo( 300, 200 ); ctx.stroke();
填充与描边样式语法:
- CanvasRenderingContext2D.strokeStyle = value
- CanvasRenderingContext2D.fillStyle = value
描述:
- strokeStyle 可以设置描边颜色, 与 CSS 的语法一样
- fillStyle 设置填充颜色, 与 CSS 语法一样
- 这两个属性还可以设置渐变对象.
案例
[JavaScript] 纯文本查看 复制代码
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ')';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke();
}
}
效果
实例练习1.3.1. 绘制坐标网格
绘制下面的效果
[JavaScript] 纯文本查看 复制代码
var cas = document.getElementById( 'cas' );
var ctx = cas.getContext( '2d' );
var width = 30;
var rows = cas.height / width;
var cols = cas.width / width;
for ( var i = 0; i < rows; i++ ) {
for ( var j = 0; j < cols; j++ ) {
ctx.moveTo( j * width, ( i + 1 ) * width );
ctx.lineTo( j * width + width, ( i + 1 ) * width );
// 开始绘制竖着的
ctx.lineTo( j * width + width, i * width );
}
}
ctx.stroke();
file:///C:/Users/Somnus/Desktop/Canvas%E5%9F%BA%E7%A1%80%E8%AE%B2%E4%B9%89/imgs/2016-08-09_121247.png
绘制坐标系
绘制下面的效果
[JavaScript] 纯文本查看 复制代码
var cas = document.getElementById( 'cas' );
var ctx = cas.getContext( '2d' );
var paddingTop = 30,
paddingLeft = 30,
paddingBottom = 30,
paddingRight = 30;
var arrowHeight = 20,
arrowWidth = 10;
var x0 = paddingLeft,
y0 = cas.height - paddingBottom;
// 首先绘制坐标轴线
ctx.moveTo( x0, paddingTop );
ctx.lineTo( x0, y0 );
ctx.lineTo( cas.width - paddingRight, y0 );
// 绘制箭头
// 绘制 x 轴
// ctx.moveTo( cas.width - paddingRight, y0 );
// ctx.lineTo( cas.width - paddingRight - arrowHeight, y0 - arrowWidth * .5 );
// ctx.moveTo( cas.width - paddingRight, y0 );
// ctx.lineTo( cas.width - paddingRight - arrowHeight, y0 + arrowWidth * .5 );
// ctx.moveTo( paddingLeft, paddingTop );
// ctx.lineTo( paddingLeft - arrowWidth * .5, paddingTop + arrowHeight );
// ctx.moveTo( paddingLeft, paddingTop );
// ctx.lineTo( paddingLeft + arrowWidth * .5, paddingTop + arrowHeight );
ctx.stroke();
file:///C:/Users/Somnus/Desktop/Canvas%E5%9F%BA%E7%A1%80%E8%AE%B2%E4%B9%89/imgs/2016-08-09_122426.png
1.3.3. 绘制坐标点
绘制下面的效果
[JavaScript] 纯文本查看 复制代码
var cas = document.getElementById( 'cas' );
var ctx = cas.getContext( '2d' );
var paddingTop = 50,
paddingLeft = 50,
paddingBottom = 50,
paddingRight = 50;
var arrowHeight = 20,
arrowWidth = 10;
var x0 = paddingLeft,
y0 = cas.height - paddingBottom;
// 首先绘制坐标轴线
ctx.moveTo( x0, paddingTop );
ctx.lineTo( x0, y0 );
ctx.lineTo( cas.width - paddingRight, y0 );
ctx.stroke();
// 绘制箭头
// 绘制 x 轴
ctx.beginPath();
ctx.moveTo( cas.width - paddingRight, y0 );
ctx.lineTo( cas.width - paddingRight - arrowHeight, y0 - arrowWidth * .5 );
ctx.lineTo( cas.width - paddingRight - arrowHeight * .5, y0 );
ctx.lineTo( cas.width - paddingRight - arrowHeight, y0 + arrowWidth * .5 );
ctx.closePath();
ctx.moveTo( paddingLeft, paddingTop );
ctx.lineTo( paddingLeft - arrowWidth * .5, paddingTop + arrowHeight );
ctx.lineTo( paddingLeft, paddingTop + arrowHeight * .5 );
ctx.lineTo( paddingLeft + arrowWidth * .5, paddingTop + arrowHeight );
ctx.closePath();
ctx.fill();
// 下面绘制点
ctx.beginPath();
// 绘制一个点在坐标轴的中间
var width = cas.width - paddingRight - paddingLeft - arrowHeight,
height = cas.height - paddingTop - paddingBottom - arrowHeight;
var x = width * .5,
y = height * .5;
// 坐标变换
x = x0 + x;
y = y0 - y;
// 绘制一个红色的矩形
var pointWidth = 8;
ctx.fillStyle = 'red';
ctx.moveTo( x - pointWidth * .5, y - pointWidth / 2 );
ctx.lineTo( x + pointWidth * .5, y - pointWidth / 2 );
ctx.lineTo( x + pointWidth * .5, y + pointWidth / 2 );
ctx.lineTo( x - pointWidth * .5, y + pointWidth / 2 );
ctx.closePath();
ctx.fill();
file:///C:/Users/Somnus/Desktop/Canvas%E5%9F%BA%E7%A1%80%E8%AE%B2%E4%B9%89/imgs/2016-08-09_130716.png
1.3.4. 绘制折线图
如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！
黑马程序员济南中心联系电话：0531-55696830
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |