08canvas画图

08 Fun with HTML5 Canvas打卡指南

作者：@sandystar

简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 8 篇。完整代码已经放到github上了，欢迎访问！

实现效果

使用canvas实现一个可以在浏览器中画画的效果。画笔粗细渐变，颜色渐变。

实现要点

【canvas】：

基本属性：

• getContext() ：方法返回canvas 的上下文，如果上下文没有定义则返回null
• strokeStyle()：是 Canvas 2D API 描述画笔（绘制图形）颜色或者样式的属性。默认值是 #000 (black)
• lineJoin：是 Canvas 2D API 用来设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）。
• lineCap()：是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有3个可能的值，分别是：butt, round and square。默认值是 butt。