detail change

soyaine · soyaine · commit 594501bd78b4 · 2017-01-04T22:54:39.000+08:00
diff --git a/08 - Fun with HTML5 Canvas/README.md b/08 - Fun with HTML5 Canvas/README.md
@@ -7,7 +7,7 @@
 
 ![HTML5 Canvas 画板效果](https://cl.ly/412q1g0u3N31/Screen%20recording%202017-01-04%20at%2007.38.05%20PM.gif)
 
-用 HTML5 中的 Canvas 的路径绘制实现一个绘画板，可供鼠标画画，颜色呈彩虹色渐变，画笔大小同样呈渐变效果。这部分不涉及 CSS 内容，全部由 JS 来实现。
+用 HTML5 中的 Canvas 的路径绘制实现一个绘画板，可供鼠标画画，颜色呈彩虹色渐变，画笔大小同样呈渐变效果。这部分不涉及 CSS 内容，全部由 JS 来实现。[在线体验请看这个链接](http://soyaine.cn/JavaScript30/08%20-%20Fun%20with%20HTML5%20Canvas/index-SOYAINE.html)。
 
 ## 涉及特性
 
diff --git a/08 - Fun with HTML5 Canvas/index-SOYAINE.html b/08 - Fun with HTML5 Canvas/index-SOYAINE.html
@@ -19,7 +19,7 @@
 
 	ctx.lineWidth = 90;
 	ctx.lineCap = "round";
-	ctx.lineJoin = "miter";
+	ctx.lineJoin = "round";
 	ctx.strokeStyle = "#f00";
 	ctx.fillStyle = "#f00";
 	
@@ -46,14 +46,14 @@
 		ctx.strokeStyle = `hsl(${ hue }, 90%, 50%)`;	
 		if(hue >= 360) hue = 0;
 		hue++;
-//		
+		
 //		水墨效果
 //		ctx.strokeStyle = `rgba(0, 0, 0, ${ hue })`;			
 //		if(hue >= 0.7) hue = 0;
 //		hue += 0.01;
 		
 //		控制笔触大小
-		if(ctx.lineWidth > 100 || ctx.lineWidth < 80) {
+		if(ctx.lineWidth > 120 || ctx.lineWidth < 10) {
 			direction = !direction;
 		} 
 		if (direction) {
@@ -74,7 +74,6 @@
 //		console.log(ctx.lineWidth);
 //		console.log(x +"-" + e.offsetX);
 	}
-	
 	canvas.addEventListener('mousedown', (e) => {
 		isDrawing = true;
 		[lastX, lastY] = [e.offsetX, e.offsetY];
