[Day8] Fun with HTML5 Canvas

[Day8] Fun with HTML5 Canvas

Canvas 的运用

需要用到的技巧与练习目标

1. 元素 与 渲染环境
2. strokeStyle | lineJoin | lineCap

元素

<canvas id="draw" width="150" height="150"></canvas>

<canvas>看起来有点像img但没有src alt的属性。
只有width和height但这两个非必须，也可以运用DOM属性设定。
也可以和一般影像依样设定margin border 或是 background，但是这些都会改变canvas实际外观，

渲染环境(rendering context)

有了<canvas>产生一个绘图画布後，画布上面需要有一个以上的渲染环境，不同的环境(context) 会提供不同的渲染方法。
这边的范例是举2D绘图。

var canvas = docment.getElementById('draw');
var ctx = canvas.getContext('2d');

改变canvas的渲染范围

透过js的写法来改变渲染范围，使渲染范围占据整个视窗

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

strokeStyle | lineJoin | lineCap

套用样式与颜色

如果想要套用颜色，有两种属性可以选择。
fillStyle = color 设定填满图形用的颜色。
strokeStyle = color 设定勾勒图形要用的颜色。

这边范例采用的是 strokeStyle

lineJoin

lineJoin是用来设置衔接两个长度不为0的相连部分，如何衔接在一起的属性
有三种属性可以运用。round bevel和miter，其中miter为预设值。

round 相连的地方会形成一个圆形，看起来圆滑。
bevel 相连的地方会形成一个三角形，使各线段有自己的柺角。
miter 相连的地方会形成一个方形，看起来为尖角转折。

由於我们想要绘制 流畅的线条 因此这边选择 round

lineCap

lineCap是用来设置线段结尾的形状
有三种属性可以运用 round butt square
butt `为预设值。

round 线段末端为圆形结束。
butt 线段末端以方形结束。
square 线段末端同样以方形结束，但是会多绘制一个宽度和线段相同，高度则为宽度一半的方形在最後方。

参考资料来源:
https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API/Tutorial/Basic_usage#%3Ccanvas%3E_%E5%85%83%E7%B4%A0

https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineJoin

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineCap