├── _config.yml
├── .idea
    ├── .gitignore
    ├── vcs.xml
    ├── encodings.xml
    ├── modules.xml
    └── misc.xml
├── images
    ├── arch.png
    ├── bomb.png
    ├── camp.png
    ├── sky.png
    ├── tree.png
    ├── QQGroup.jpg
    ├── bucket.png
    ├── canyon.png
    ├── cloth.png
    ├── grass.png
    ├── grass2.png
    ├── redball.png
    ├── smalltree.png
    ├── waterfall.png
    ├── countrypath.jpg
    ├── curved-road.png
    ├── grand-canyon.png
    ├── log-crossing.png
    ├── lonelybeach.png
    ├── tree-twotrunks.png
    └── running-sprite-sheet.png
├── CanvasStudy.iml
├── Unit2
    ├── Arc.html
    ├── PathSubpath.html
    ├── Shadow.html
    ├── ContextExtends.html
    ├── DottedLine.html
    ├── Rectangle.html
    ├── LineCap.html
    ├── Gradient.html
    ├── ColorAndOpaque.html
    ├── AntLine.html
    ├── ArcTo.html
    ├── QuadraticCurveTick.html
    ├── LineJoin.html
    ├── Eraser.html
    ├── Line.html
    ├── CutoutCircle.html
    ├── PathStrokeFill.html
    ├── Pattern.html
    ├── TextScaleRotate.html
    ├── PolygonSimple.html
    ├── GridBackground.html
    ├── QuadraticCurveTriangle.html
    ├── MoveRect.html
    ├── BezierCurve.html
    ├── PictureSynthesis.html
    ├── CutoutShape.html
    ├── Axis.html
    ├── AxisScale.html
    ├── AxisRotate.html
    ├── AxisTranslate.html
    ├── AxisMirro.html
    ├── DragCircle.html
    ├── DragLine.html
    ├── Dashboard.html
    ├── RadiusShape.html
    ├── PolygonDraw.html
    └── EditableBezierCurves.html
├── Unit1
    ├── Listener
    │   ├── Mouse.html
    │   └── SpriteSheets.html
    ├── MathBase.html
    ├── CanvasAPI
    │   ├── ToBlob.html
    │   └── toDataURL
    │   │   ├── QualityTest.html
    │   │   └── ToDataUrl.html
    ├── CanvasSize.html
    ├── CanvasSizeNotCSS.html
    ├── saveAndRestore.html
    ├── Clock.html
    ├── ClockReturnImage2.html
    ├── ClockReturnImage.html
    ├── BouncingBalls.html
    └── RubberBands.html
├── LICENSE
├── Unit4
    ├── DrawImage.html
    ├── CanvasDrawEachOther.html
    └── ScalingImage.html
├── Unit3
    ├── MeasureText.html
    ├── TextFont.html
    ├── TextGradientsAndPatterns.html
    ├── TextAlignAndTextBaseline.html
    ├── TextStrokeFillShadow.html
    ├── CircleText.html
    └── AxisWithText.html
└── README.md


/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | # Default ignored files
2 | /workspace.xml


--------------------------------------------------------------------------------
/images/arch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/arch.png


--------------------------------------------------------------------------------
/images/bomb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/bomb.png


--------------------------------------------------------------------------------
/images/camp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/camp.png


--------------------------------------------------------------------------------
/images/sky.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/sky.png


--------------------------------------------------------------------------------
/images/tree.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/tree.png


--------------------------------------------------------------------------------
/images/QQGroup.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/QQGroup.jpg


--------------------------------------------------------------------------------
/images/bucket.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/bucket.png


--------------------------------------------------------------------------------
/images/canyon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/canyon.png


--------------------------------------------------------------------------------
/images/cloth.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/cloth.png


--------------------------------------------------------------------------------
/images/grass.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/grass.png


--------------------------------------------------------------------------------
/images/grass2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/grass2.png


--------------------------------------------------------------------------------
/images/redball.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/redball.png


--------------------------------------------------------------------------------
/images/smalltree.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/smalltree.png


--------------------------------------------------------------------------------
/images/waterfall.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/waterfall.png


--------------------------------------------------------------------------------
/images/countrypath.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/countrypath.jpg


--------------------------------------------------------------------------------
/images/curved-road.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/curved-road.png


--------------------------------------------------------------------------------
/images/grand-canyon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/grand-canyon.png


--------------------------------------------------------------------------------
/images/log-crossing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/log-crossing.png


--------------------------------------------------------------------------------
/images/lonelybeach.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/lonelybeach.png


--------------------------------------------------------------------------------
/images/tree-twotrunks.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/tree-twotrunks.png


--------------------------------------------------------------------------------
/images/running-sprite-sheet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/827652549/CanvasStudy/HEAD/images/running-sprite-sheet.png


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/encodings.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="Encoding" addBOMForNewFiles="with NO BOM">
4 |     <file url="file://$PROJECT_DIR$/Unit2/PolygonDraw2.html" charset="UTF-8" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/CanvasStudy.iml" filepath="$PROJECT_DIR$/CanvasStudy.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="JavaScriptSettings">
4 |     <option name="languageLevel" value="ES6" />
5 |   </component>
6 |   <component name="ProjectRootManager">
7 |     <output url="file://$PROJECT_DIR$/out" />
8 |   </component>
9 | </project>


--------------------------------------------------------------------------------
/CanvasStudy.iml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <module type="WEB_MODULE" version="4">
3 |   <component name="NewModuleRootManager" inherit-compiler-output="true">
4 |     <exclude-output />
5 |     <content url="file://$MODULE_DIR$" />
6 |     <orderEntry type="sourceFolder" forTests="false" />
7 |   </component>
8 | </module>


--------------------------------------------------------------------------------
/Unit2/Arc.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>arc()作圆弧</title>
 6 | </head>
 7 | <body>
 8 | 
 9 | <canvas id="canvas" width="500" height="500"></canvas>
10 | </body>
11 | <script>
12 |     var canvas = document.getElementById('canvas'),
13 |         context = canvas.getContext('2d');
14 |     context.beginPath();
15 |     context.arc(100, 100, 50, Math.PI / 4, Math.PI, false);
16 |     context.stroke();
17 | 
18 | </script>
19 | </html>


--------------------------------------------------------------------------------
/Unit1/Listener/Mouse.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>鼠标监听时间</title>
 6 | </head>
 7 | <body>
 8 | <canvas id="canvas"></canvas>
 9 | </body>
10 | <script>
11 |     var canvas = document.getElementById('canvas'),
12 |         context = canvas.getContext('2d');
13 | 
14 |     canvas.onmousedown = function (e) {
15 |         //处理canvas的按下鼠标事件
16 |     }
17 | 
18 |     canvas.addEventListener('mousedown',function (ev) {
19 |         //处理canvas的按下鼠标事件
20 |     })
21 | 
22 | </script>
23 | </html>


--------------------------------------------------------------------------------
/Unit2/PathSubpath.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>路径与子路径</title>
 6 | </head>
 7 | <body>
 8 |     <canvas id="canvas"></canvas>
 9 | </body>
10 | <script>
11 |     var canvas = document.getElementById('canvas'),
12 |     context = canvas.getContext('2d');
13 | 
14 |     context.beginPath();
15 | 
16 |     context.rect(10,10,100,100);
17 |     context.stroke();
18 | 
19 |     context.beginPath();
20 | 
21 |     context.rect(30,30,100,100);
22 |     context.stroke();
23 | </script>
24 | </html>


--------------------------------------------------------------------------------
/Unit2/Shadow.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>阴影</title>
 6 | </head>
 7 | <body>
 8 | <canvas id="canvas"></canvas>
 9 | </body>
10 | <script>
11 |     var canvas =document.getElementById('canvas'),
12 |         context = canvas.getContext('2d');
13 | 
14 |     context.lineWidth=3;
15 | 
16 |     context.shadowColor="rgba(0,0,0,0.75)";
17 |     context.shadowOffsetX=5;
18 |     context.shadowOffsetY=5;
19 |     context.shadowBlur=5;
20 |     context.strokeRect(20,20,50,50);
21 |     context.fillRect(100,20,50,50);
22 | </script>
23 | </html>


--------------------------------------------------------------------------------
/Unit2/ContextExtends.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>CanvasRenderingContext2D拓展</title>
 6 | </head>
 7 | <body>
 8 |     <canvas id="canvas"></canvas>
 9 | </body>
10 | <script>
11 |     var canvas = document.getElementById('canvas'),
12 |         context = canvas.getContext('2d');
13 |     //添加新属性
14 |     CanvasRenderingContext2D.prototype.newProperty = '新属性';
15 |     //添加新方法
16 |     CanvasRenderingContext2D.prototype.newFunction = function () {
17 |         console.log('新方法');
18 |     };
19 | 
20 |     //测试新属性
21 |     console.log(context.newProperty);
22 |     //测试新方法
23 |     context.newFunction();
24 | 
25 | </script>
26 | </html>


--------------------------------------------------------------------------------
/Unit2/DottedLine.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>虚线的绘制</title>
 6 |     <!--现在，所有浏览器都实现了虚线都方法，这里便不再手动编写虚线都函数-->
 7 | </head>
 8 | <body>
 9 | <canvas id="canvas"></canvas>
10 | </body>
11 | <script>
12 |     var canvas = document.getElementById('canvas'),
13 |         context = canvas.getContext('2d');
14 | 
15 |     //实线
16 |     context.beginPath();
17 |     context.setLineDash([]);
18 |     context.moveTo(10, 10);
19 |     context.lineTo(100, 10);
20 |     context.stroke();
21 | 
22 |     //虚线(线长：2，间距：2)
23 |     context.beginPath();
24 |     context.setLineDash([5, 4,3]);
25 |     context.moveTo(10, 20);
26 |     context.lineTo(100, 20);
27 |     context.stroke();
28 | 
29 | 
30 | </script>
31 | </html>


--------------------------------------------------------------------------------
/Unit2/Rectangle.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>矩形的绘制</title>
 6 | </head>
 7 | <body>
 8 | <canvas id="canvas" width="700" height="500"></canvas>
 9 | </body>
10 | <script>
11 |     var canvas = document.getElementById('canvas'),
12 |         context = canvas.getContext('2d');
13 | 
14 |     context.lineJoin = 'round';
15 |     context.lineWidth = 30;
16 | 
17 |     context.font = '24px Helvetica';
18 |     context.fillText('点击任何处以擦除', 175, 40);
19 | 
20 |     context.strokeRect(75, 100, 200, 200);
21 |     context.fillRect(325, 100, 200, 200);
22 | 
23 |     context.canvas.onmousedown = function (ev) {
24 |         context.clearRect(0, 0, canvas.width, canvas.height);
25 |     }
26 | </script>
27 | </html>


--------------------------------------------------------------------------------
/Unit2/LineCap.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>线段端点</title>
 6 | </head>
 7 | <body>
 8 | <canvas id="canvas"></canvas>
 9 | </body>
10 | <script>
11 |     var canvas = document.getElementById('canvas'),
12 |         context = canvas.getContext('2d');
13 | 
14 |     context.lineWidth=10;
15 |     context.lineCap='butt';//默认，原样绘制
16 | 
17 |     context.beginPath();
18 |     context.moveTo(10,10);
19 |     context.lineTo(100,10);
20 |     context.stroke();
21 | 
22 |     context.lineCap='round';
23 |     context.beginPath();
24 |     context.moveTo(10,30);
25 |     context.lineTo(100,30);
26 |     context.stroke();
27 | 
28 |     context.lineCap='square';
29 |     context.beginPath();
30 |     context.moveTo(10,50);
31 |     context.lineTo(100,50);
32 |     context.stroke();
33 | 
34 | </script>
35 | </html>


--------------------------------------------------------------------------------
/Unit2/Gradient.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>渐变色</title>
 6 | </head>
 7 | <body>
 8 |     <canvas id="canvas" height="300" width="300" style="border: thin solid black"></canvas>
 9 | </body>
10 | <script>
11 |     var canvas = document.getElementById('canvas'),
12 |         context = canvas.getContext('2d'),
13 |         //更改本行代码可以更改渐变的方向
14 |         gradient = context.createRadialGradient(canvas.width/2,canvas.height,10,canvas.width/2,0,100);
15 | 
16 |     gradient.addColorStop(0, 'blue');
17 |     gradient.addColorStop(0.25, 'white');
18 |     gradient.addColorStop(0.5, 'purple');
19 |     gradient.addColorStop(0.75, 'red');
20 |     gradient.addColorStop(1, 'yellow');
21 | 
22 |     context.fillStyle=gradient;
23 |     context.rect(0,0,canvas.width,canvas.height);
24 |     context.fill();
25 | </script>
26 | </html>


--------------------------------------------------------------------------------
/Unit2/ColorAndOpaque.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>颜色与不透明度</title>
 6 | </head>
 7 | <body>
 8 | <canvas id="canvas" width="700" height="500" style="border: thin solid black"></canvas>
 9 | </body>
10 | <script>
11 |     var canvas = document.getElementById('canvas'),
12 |         context = canvas.getContext('2d');
13 | 
14 |     context.lineJoin = 'round';
15 |     context.lineWidth = 30;
16 | 
17 |     context.font = '24px Helvetica';
18 |     context.fillText('点击任何处以擦除', 175, 200);
19 | 
20 |     context.strokeStyle = 'goldenrod';
21 |     context.fillStyle = 'rgba(0,0,255,0.5)';
22 | 
23 |     context.strokeRect(75, 100, 200, 200);
24 |     context.fillRect(325, 100, 200, 200);
25 | 
26 |     context.canvas.onmousedown = function (ev) {
27 |         context.clearRect(0, 0, canvas.width, canvas.height);
28 |     }
29 | </script>
30 | </html>


--------------------------------------------------------------------------------
/Unit2/AntLine.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>蚂蚁线</title>
 6 | </head>
 7 | <body>
 8 |     <canvas id="canvas"></canvas>
 9 | </body>
10 | <script>
11 |     var canvas = document.getElementById('canvas'),
12 |         context = canvas.getContext('2d');
13 |         offset = 0.0;
14 |         context.setLineDash([5,5]);
15 | 
16 |     /**
17 |      * 画虚线矩形，并调整偏移量
18 |      */
19 |     function antChange() {
20 |         offset+=3.0;
21 |         context.lineDashOffset=offset;
22 |         context.beginPath();
23 |         context.rect(10,10,100,100);
24 |         context.stroke();
25 |     }
26 | 
27 |     /**
28 |      * 清除之前的图像
29 |      */
30 |     function clear(){
31 |         context.clearRect(0,0,canvas.width,canvas.height);
32 |     }
33 | 
34 |     /**
35 |      * 画蚂蚁线
36 |      */
37 |     function antLine(){
38 |         clear();
39 |         antChange();
40 |     }
41 |         setInterval(antLine,200);
42 | </script>
43 | </html>


--------------------------------------------------------------------------------
/Unit2/ArcTo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>arcTo()作圆弧</title>
 6 | </head>
 7 | <body>
 8 |     <canvas id="canvas"></canvas>
 9 | </body>
10 | <script>
11 |     var canvas = document.getElementById('canvas'),
12 |         context = canvas.getContext('2d');
13 | 
14 |     context.lineWidth=5;
15 | 
16 |     //实现一个圆角矩形的一个角
17 | 
18 |     //黑虚线画上边
19 |     context.setLineDash([5,5]);
20 |     context.beginPath();
21 |     context.moveTo(10,10);
22 |     context.lineTo(100,10);
23 |     context.stroke();
24 | 
25 |     //红实线画弧角
26 |     context.strokeStyle='red';
27 |     context.beginPath();
28 |     context.moveTo(100,10);
29 |     context.setLineDash([]);
30 |     context.arcTo(150,10,150,60,50);
31 |     context.stroke();
32 | 
33 |     //黑虚线画右边
34 |     context.strokeStyle='black';
35 |     context.beginPath();
36 |     context.setLineDash([5,5]);
37 |     context.moveTo(150,60);
38 |     context.lineTo(150,150);
39 |     context.stroke();
40 | 
41 | </script>
42 | </html>


--------------------------------------------------------------------------------
/Unit1/MathBase.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 | </head>
 7 | <body>
 8 | 
 9 | </body>
10 | <script>
11 |     /**
12 |      * 单位向量的分量计算
13 |      */
14 |     var vectorMagnitude = Math.sqrt(Math.pow(vector.x, 2) + Math.pow(vector.y, 2)),
15 |         //新单位向量
16 |         unitVector = new Vector();
17 |     //新单位向量上的x值
18 |     unitVector.x = vector.x / vectorMagnitude;
19 |     //新单位向量上的y值
20 |     unitVector.y = vector.y / vectorMagnitude;
21 | 
22 |     /**
23 |      * 两个向量相加
24 |      */
25 |     var vectorSum = new Vector();
26 | 
27 |     vectorSum.x = vectorA.x + vectorB.x;
28 |     vectorSum.y = vectorA.y + vectorB.y;
29 | 
30 |     /**
31 |      * 两个向量相减
32 |      */
33 |     var vectorSubtraction = new Vector();
34 | 
35 |     vectorSubtraction.x = vectorA.x - vectorB.x;
36 |     vectorSubtraction.y = vectorA.y - vectorB.y;
37 | 
38 |     /**
39 |      * 两个向量的点积
40 |      */
41 |     var dotProduct = vectorA.x * vectorB.x + vectorA.y * vectorB.y;
42 | 
43 | 
44 | </script>
45 | </html>


--------------------------------------------------------------------------------
/Unit2/QuadraticCurveTick.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>对勾，二次方贝塞尔曲线</title>
 6 | </head>
 7 | <body>
 8 | <p>这是用三条二次方贝塞尔曲线构成的复选框标记对号<input type="checkbox" checked></p>
 9 | 
10 | <canvas id="canvas" width="400" height="400"></canvas>
11 | </body>
12 | <script>
13 |     var canvas = document.getElementById('canvas'),
14 |         context = canvas.getContext('2d');
15 | 
16 |     context.strokeStyle = '#3aa112';
17 | 
18 |     context.shadowColor = 'rgba(50,50,50,1.0)';
19 |     context.shadowOffsetX = 3;
20 |     context.shadowOffsetY = 3;
21 |     context.shadowBlur = 4;
22 | 
23 |     context.lineWidth=20;
24 |     context.lineCap='round';
25 | 
26 |     context.beginPath();
27 |     //设定开始点(120.5,130)
28 |     context.moveTo(120.5,130);
29 |     //设定控制点(150.8,130)和结束点(160.6,150.5);
30 |     context.quadraticCurveTo(150.8,130,160.6,150.5);
31 |     context.quadraticCurveTo(190,250,210.5,160.5);
32 |     context.quadraticCurveTo(240,100.5,290,70.5);
33 | 
34 |     context.stroke();
35 | </script>
36 | </html>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 苏一恒
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/Unit2/LineJoin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>线段连接点</title>
 6 | </head>
 7 | <body>
 8 |     <canvas id="canvas"></canvas>
 9 | </body>
10 | <script>
11 |     var canvas =document.getElementById('canvas'),
12 |         context = canvas.getContext('2d');
13 | 
14 |     context.lineWidth=15;
15 | 
16 | 
17 |     //圆角连接点
18 |     context.lineJoin='round';
19 |     context.strokeStyle='#aaaaaa';
20 |     context.beginPath();
21 |     context.moveTo(10,10);
22 |     context.lineTo(100,10);
23 |     context.lineTo(100,50);
24 |     context.stroke();
25 | 
26 |     //用一条直线连接两角外部的点。
27 |     context.lineJoin='bevel';
28 |     context.strokeStyle='#777777';
29 |     context.beginPath();
30 |     context.moveTo(30,30);
31 |     context.lineTo(120,30);
32 |     context.lineTo(120,70);
33 |     context.stroke();
34 | 
35 |     //延长两个路径的外边至相交，突出一个角
36 |     context.lineJoin='miter';
37 |     context.strokeStyle='#444444';
38 |     context.beginPath();
39 |     context.moveTo(50,50);
40 |     context.lineTo(140,50);
41 |     context.lineTo(140,90);
42 |     context.stroke();
43 | 
44 | </script>
45 | </html>


--------------------------------------------------------------------------------
/Unit1/CanvasAPI/ToBlob.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Canvas对象的toBlob方法示例</title>
 6 | </head>
 7 | <body>
 8 | <canvas id="canvas"></canvas>
 9 | </body>
10 | <script>
11 |     //获取canvas元素
12 |     var canvas = document.getElementById("canvas");
13 | 
14 |     //第一个参数是回调函数
15 |     canvas.toBlob(
16 |         //传入blob对象
17 |         function (blob) {
18 |             //创建一个img标签
19 |             var newImg = document.createElement("img"),
20 |                 //以blob对象为基础创建一个url
21 |                 url = URL.createObjectURL(blob);
22 | 
23 |                 console.log(url);
24 |                 //blob:http://localhost:63342/d869ed9c-cad0-49f9-9965-e9959a15e0c0
25 |                 console.log(blob);
26 |                 //返回一个BLOB对象
27 | 
28 |             //加载后销毁
29 |             newImg.onload = function () {
30 |                 // no longer need to read the blob so it's revoked
31 |                 URL.revokeObjectURL(url);
32 |             };
33 | 
34 |             //img标签属性赋值
35 |             newImg.src = url;
36 |             //添加为子元素
37 |             document.body.appendChild(newImg);
38 |         });
39 | </script>
40 | </html>


--------------------------------------------------------------------------------
/Unit2/Eraser.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>橡皮擦的简单演示</title>
 6 | </head>
 7 | <body>
 8 | <canvas id="canvas" height="500" width="500">Canvas not support</canvas>
 9 | <script>
10 |     'use strict';
11 | 
12 |     let canvas = document.getElementById('canvas'),
13 |         context = canvas.getContext('2d');
14 | 
15 |     context.rect(0, 0, canvas.width, canvas.height);
16 |     context.fill();
17 | 
18 |     context.beginPath();
19 |     canvas.onmousemove = ev => {
20 | 
21 |         context.save();
22 |         let mouse = windowToCanvas(ev);
23 |         //设定橡皮擦大小
24 |         context.rect(mouse.x - 10, mouse.y - 10, 20, 20);
25 |         context.clip();
26 |         context.clearRect(0, 0, canvas.width, canvas.height);
27 |         context.restore();
28 |     };
29 | 
30 |     function windowToCanvas(e) {
31 |         let x = e.x || e.clientX,
32 |             y = e.y || e.clientY,
33 |             bbox = canvas.getBoundingClientRect();
34 | 
35 |         return {
36 |             x: x - bbox.left * (canvas.width / bbox.width),
37 |             y: y - bbox.top * (canvas.height / bbox.height)
38 |         };
39 |     }
40 | </script>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/Unit4/DrawImage.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--
 3 |     Author:苏一恒
 4 |     Date:2019/10/28 12:39
 5 |     Motto:
 6 |         The best time to plant trees is ten years ago, followed by now. 
 7 |         种树最好的时间是十年前，其次是现在。
 8 |  -->
 9 | <html lang="zh-CN">
10 | <head>
11 |     <meta charset="UTF-8">
12 |     <title>图像的绘制</title>
13 |     <style>
14 |         body {
15 |             background: #eeeeee;
16 |         }
17 | 
18 |         #canvas {
19 |             background: #ffffff;
20 |             margin-top: 5px;
21 |             margin-left: 10px;
22 |             -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
23 |             -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
24 |             box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
25 |             border: 1px solid rgba(0, 0, 0, 0.2);
26 |         }
27 |     </style>
28 | </head>
29 | <body>
30 | <canvas id='canvas' height="400" width="600">canvas not supports</canvas>
31 | 
32 | <script>
33 |     'use strict';
34 | 
35 |     let canvas = document.getElementById('canvas'),
36 |         context = canvas.getContext('2d'),
37 |         image = new Image();
38 | 
39 |     image.src='../images/waterfall.png';
40 |     image.onload = () => {
41 |         context.drawImage(image,0,0);
42 |     }
43 | 
44 | </script>
45 | </body>
46 | </html>


--------------------------------------------------------------------------------
/Unit3/MeasureText.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--
 3 |     Author:苏一恒
 4 |     Date:2019/10/11 11:41
 5 |     Motto:
 6 |         The best time to plant trees is ten years ago, followed by now. 
 7 |         种树最好的时间是十年前，其次是现在。
 8 |  -->
 9 | <html lang="zh-CN">
10 | <head>
11 |     <meta charset="UTF-8">
12 |     <title>度量文本MeasureText</title>
13 |     <style>
14 |         body {
15 |             background: #eeeeee;
16 |         }
17 | 
18 |         #canvas {
19 |             background: #ffffff;
20 |             margin-top: 5px;
21 |             margin-left: 10px;
22 |             -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
23 |             -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
24 |             box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
25 |             border: 1px solid rgba(0, 0, 0, 0.2);
26 |         }
27 |     </style>
28 | </head>
29 | <body>
30 | <canvas id='canvas'>canvas not supports</canvas>
31 | <p>width展示的是在Canvas画布上的字符串'Hello'的宽度</p>
32 | 
33 | <script>
34 |     'use strict';
35 | 
36 |     let canvas = document.getElementById('canvas'),
37 |         context = canvas.getContext('2d');
38 | 
39 |     context.font = '24px Arial';
40 |     let word = 'Hello';
41 |     context.fillText(word, 10, 50);
42 |     context.fillText('width:' + context.measureText(word).width, 10, 100);
43 | 
44 | 
45 | </script>
46 | </body>
47 | </html>


--------------------------------------------------------------------------------
/Unit2/Line.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>线段</title>
 6 | </head>
 7 | <body>
 8 |     <canvas id="canvas">
 9 | 
10 |     </canvas>
11 | </body>
12 | <script>
13 |     var canvas = document.getElementById('canvas'),
14 |         context = canvas.getContext('2d');
15 | 
16 |     context.save();
17 |     drawGird(context,'lightgray',10,10);
18 | context.restore();
19 |     context.lineWidth=1;
20 |     context.beginPath();
21 |     context.moveTo(10,10);
22 |     context.lineTo(100,10);
23 |     context.stroke();
24 |     context.beginPath();
25 |     context.moveTo(10.5,30.5);
26 |     context.lineTo(100.5,30.5);
27 |     context.stroke();
28 | 
29 |     function drawGird(context, color, stepX, stepY) {
30 |         context.strokeStyle = color;
31 |         context.lineWidth = 0.5;
32 | 
33 |         for (var i = stepX + 0.5; i < context.canvas.width; i += stepX) {
34 |             context.beginPath();
35 |             context.moveTo(i, 0);
36 |             context.lineTo(i, context.canvas.height);
37 |             context.stroke();
38 |         }
39 | 
40 |         for (var i = stepY + 0.5; i < context.canvas.height; i += stepY) {
41 |             context.beginPath();
42 |             context.moveTo(0, i);
43 |             context.lineTo(context.canvas.width, i);
44 |             context.stroke();
45 |         }
46 |     }
47 | </script>
48 | </html>


--------------------------------------------------------------------------------
/Unit1/CanvasSize.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Title</title>
 6 |     <style>
 7 |         body {
 8 |             background: #dddddd;
 9 |         }
10 | 
11 |         #canvas {
12 |             margin: 10px;
13 |             padding: 10px;
14 |             background: #ffffff;
15 |             border: thin inset #aaaaaa;
16 | 
17 |         }
18 |     </style>
19 | </head>
20 | <body>
21 | <!--canvas的默认大小是300*150像素-->
22 | <!--设置canvas的宽高的时候，不要通过CSS来设置width和height，因为CSS只能设置Canvas的元素本身大小，不能设置元素绘图表面（drawing surface）的大小-->
23 | <canvas id="canvas" width="600" height="300">
24 |     Canvas不被支持
25 | </canvas>
26 | <p>设置canvas的宽高的时候，不要通过CSS来设置width和height，因为CSS只能设置Canvas的元素本身大小，不能设置元素绘图表面（drawing surface）的大小
27 |     <a href="CanvasSizeNotCSS.html">点击查看对比</a>
28 | </p>
29 | </body>
30 | <script>
31 |     /**
32 |      * 在页面中画一个canvas，然后在居中位置写上蓝色'Hello Canvas'，并加上文字描边
33 |      * @type {HTMLElement}
34 |      */
35 |     var canvas = document.getElementById('canvas'),
36 |         context = canvas.getContext('2d');
37 |     //设置字体格式
38 |     context.font = '38pt Arial';
39 |     //fillStyle设置或返回填充canvas的颜色、渐变、模式，其中CornflowerBlue 矢车菊蓝
40 |     context.fillStyle = 'cornflowerblue';
41 |     //strokeStyle用于设置或返回笔触的颜色、渐变、模式
42 |     context.strokeStyle = 'blue';
43 |     //设置文字的内容和位置
44 |     context.fillText('Hello Canvas', canvas.width / 2 - 150, canvas.height / 2 + 15);
45 |     context.strokeText("Hello Canvas", canvas.width / 2 - 150, canvas.height / 2 + 15);
46 | </script>
47 | </html>


--------------------------------------------------------------------------------
/Unit1/CanvasSizeNotCSS.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>用CSS设置canvas大小会带来canvas.width的不正确</title>
 6 |     <style>
 7 |         body {
 8 |             background: #dddddd;
 9 |         }
10 | 
11 |         #canvas {
12 |             margin: 10px;
13 |             padding: 10px;
14 |             background: #ffffff;
15 |             border: thin inset #aaaaaa;
16 |             width: 600px;
17 |             height: 300px;
18 |         }
19 |     </style>
20 | </head>
21 | <body>
22 | <!--canvas的默认大小是300*150像素-->
23 | <!--设置canvas的宽高的时候，不要通过CSS来设置width和height，因为CSS只能设置Canvas的元素本身大小，不能设置元素绘图表面（drawing surface）的大小-->
24 | <canvas id="canvas">
25 |     Canvas不被支持
26 | </canvas>
27 | <p>为什么会放大？</p>
28 | <p>其实，当用属性设置宽高时，会同时设置canvas容器和绘图表面的大小，但是如果通过css设置宽高，只修改了canvas容器的大小，而绘图表面的大小并没有改变，导致浏览器会对绘图表面进行缩放，使其符合元素的大小。</p>
29 | </body>
30 | <script>
31 |     /**
32 |      * 在页面中画一个canvas，然后在居中位置写上蓝色'Hello Canvas'，并加上文字描边
33 |      * @type {HTMLElement}
34 |      */
35 |     var canvas = document.getElementById('canvas'),
36 |         context = canvas.getContext('2d');
37 |     //设置字体格式
38 |     context.font = '38pt Arial';
39 |     //fillStyle设置或返回填充canvas的颜色、渐变、模式，其中CornflowerBlue 矢车菊蓝
40 |     context.fillStyle = 'cornflowerblue';
41 |     //strokeStyle用于设置或返回笔触的颜色、渐变、模式
42 |     context.strokeStyle = 'blue';
43 |     //设置文字的内容和位置
44 |     context.fillText('Hello Canvas', canvas.width / 2 - 150, canvas.height / 2 + 15);
45 |     context.strokeText("Hello Canvas", canvas.width / 2 - 150, canvas.height / 2 + 15);
46 | </script>
47 | </html>


--------------------------------------------------------------------------------
/Unit1/CanvasAPI/toDataURL/QualityTest.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Testing canvas toDataURL (second) quality param</title>
 6 |     <style>
 7 |         canvas { border: 1px solid green; }
 8 |         img { border: 1px solid blue }
 9 |         span { display: block; text-align: center }
10 |         p { display: inline-block; margin-right: 10px }
11 |     </style>
12 | </head>
13 | <body>
14 | <h2>Canvas</h2>
15 | <canvas id="c" width="100"></canvas>
16 | <script>
17 |     var canvasEl = document.getElementById('c'),
18 |         ctx = canvasEl.getContext('2d');
19 | 
20 |     function test(label) {
21 |         ctx.strokeStyle = 'red';
22 |         ctx.lineWidth = 1;
23 |         ctx.arc(50,50,30.5,0,Math.PI*2,true);
24 |         ctx.stroke();
25 | 
26 |         ctx.lineWidth = 2;
27 |         ctx.strokeRect(40.5,40.5,20,20);
28 | 
29 |         document.write('<h2>' + label + '</h2>');
30 |         for (var i = 0; i < 1; i += 0.1) {
31 |             document.write('<p>');
32 |             document.write('<span>Quality: <b>' + i.toFixed(1) + '</b></span>');
33 |             document.write('<img src="' + canvasEl.toDataURL('image/jpeg', i) + '">');
34 |             document.write('</p>');
35 |         }
36 |     }
37 | 
38 |     // no background
39 |     test('toDataURL("image/jpeg", &hellip;), no background');
40 | 
41 |     ctx.fillStyle = 'white';
42 |     ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
43 | 
44 |     // white background
45 |     test('toDataURL("image/jpeg", &hellip;), white background');
46 | </script>
47 | </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/Unit4/CanvasDrawEachOther.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--
 3 |     Author:苏一恒
 4 |     Date:2019/11/3 19:35
 5 |     Motto:
 6 |         The best time to plant trees is ten years ago, followed by now. 
 7 |         种树最好的时间是十年前，其次是现在。
 8 |  -->
 9 | <html lang="zh-CN">
10 | <head>
11 |     <meta charset="UTF-8">
12 |     <title>将一个canvas绘制到另一个canvas上（通过离屏Canvas）</title>
13 |     <style>
14 |         body {
15 |             background: #eeeeee;
16 |         }
17 | 
18 |         #canvas {
19 |             background: #ffffff;
20 |             margin-top: 5px;
21 |             margin-left: 10px;
22 |             -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
23 |             -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
24 |             box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
25 |             border: 1px solid rgba(0, 0, 0, 0.2);
26 |         }
27 |     </style>
28 | </head>
29 | <body>
30 | <canvas id='canvas'>canvas not supports</canvas>
31 | 
32 | <script>
33 |     'use strict';
34 | 
35 |     let canvas = document.getElementById('canvas'),
36 |         context = canvas.getContext('2d'),
37 |         2019
38 |         offscreenContext = offscreenCanvas.getContext('2d');
39 | 
40 |     //……
41 | 
42 |     //设置离屏Canvas的尺寸匹配到屏内canvas
43 | 
44 |     offscreenCanvas.width = canvas.width;
45 |     offscreenCanvas.height = canvas.height;
46 | 
47 |     //……
48 | 
49 |     //绘制离屏context
50 |     offscreenContext.drawImage(anImage,0,0);
51 | 
52 |     //……
53 | 
54 |     //绘制新的离屏canvas尺寸到屏内canvas
55 | 
56 |     context.drawImage(offscreenCanvas,0,0,offscreenCanvas.width,offscreenCanvas.height);
57 | </script>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/Unit1/CanvasAPI/toDataURL/ToDataUrl.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Canvas对象的ToDataUrl方法示例</title>
 6 | </head>
 7 | <body>
 8 | <canvas id="canvas" width="5" height="6"></canvas>
 9 | 
10 | </body>
11 | <script>
12 |     var canvas = document.getElementById("canvas");
13 |     var dataUrl = canvas.toDataURL();
14 |     console.log(dataUrl);
15 |     //data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAD0lEQVQYV2NkwAIY6SUIAAI3AAcl6v7fAAAAAElFTkSuQmCC
16 |     /*
17 |     这个格式被称为Data URLs,可以直接键入浏览器url里，以默认格式png的形式展示图片
18 |     不过由于canvas里并没有非透明元素，所以直接浏览是看不出什么的，可以用比较画面丰富的canvas元素的Data URLs来进行浏览
19 |      */
20 |     //全质量 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAGAAUDAREAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAAC//EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AP/B//9k=
21 |     var fullQuality = canvas.toDataURL('image/jpeg',1);
22 |     //半质量 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAAGAAUDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AJ+AD//Z
23 |     var mediumQuality = canvas.toDataURL('image/jpeg',0.5);
24 |     //低质量 data:image/webp;base64,UklGRk4AAABXRUJQVlA4WAoAAAAQAAAABAAABQAAQUxQSA8AAAABBxAREQAIwv+2iYj+hwAAVlA4IBgAAAAwAQCdASoFAAYAB0CWJaQAA3AA/u+5AAA=
25 |     var lowQuality = canvas.toDataURL('image/webp',0.1);
26 | 
27 | </script>
28 | </html>


--------------------------------------------------------------------------------
/Unit4/ScalingImage.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--
 3 |     Author:苏一恒
 4 |     Date:2019/10/29 20:15
 5 |     Motto:
 6 |         The best time to plant trees is ten years ago, followed by now. 
 7 |         种树最好的时间是十年前，其次是现在。
 8 |  -->
 9 | <html lang="zh-CN">
10 | <head>
11 |     <meta charset="UTF-8">
12 |     <title>图像的绘制</title>
13 |     <style>
14 |         body {
15 |             background: #eeeeee;
16 |         }
17 | 
18 |         #canvas {
19 |             background: #ffffff;
20 |             margin-top: 5px;
21 |             margin-left: 10px;
22 |             -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
23 |             -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
24 |             box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
25 |             border: 1px solid rgba(0, 0, 0, 0.2);
26 |         }
27 |     </style>
28 | </head>
29 | <body>
30 | <div id='controls'>
31 |     <input id='scaleCheckbox' type='checkbox'/>
32 |     缩放图片
33 | </div>
34 | <canvas id='canvas' height="400" width="600">canvas not supports</canvas>
35 | 
36 | <script>
37 |     'use strict';
38 |     let canvas = document.getElementById('canvas'),
39 |         context = canvas.getContext('2d'),
40 |         image = new Image(),
41 |         scaleCheckbox = document.getElementById('scaleCheckbox');
42 | 
43 |     let drawImage = ()=>{
44 |       context.clearRect(0,0,canvas.width,canvas.height);
45 | 
46 |       if (scaleCheckbox.checked){
47 |           context.drawImage(image,0,0,canvas.width,canvas.height);
48 |       }
49 |       else{
50 |           context.drawImage(image, 0, 0);
51 |       }
52 |       context.restore();
53 |     };
54 | 
55 |     scaleCheckbox.onchange=e=>{
56 |         drawImage();
57 |     };
58 | 
59 |     image.src='../images/waterfall.png';
60 |     image.onload = () => {
61 |         context.drawImage(image,0,0);
62 |     };
63 | </script>
64 | </body>
65 | </html>


--------------------------------------------------------------------------------
/Unit1/saveAndRestore.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>save方法和restore方法的使用</title>
 6 | </head>
 7 | <body>
 8 |     <canvas id="canvas" width="500" height="500"></canvas>
 9 | </body>
10 | <script>
11 |     var canvas = document.getElementById("canvas");
12 |     var context = canvas.getContext('2d');
13 |     //……
14 | 
15 |     //save和restore绘图表面
16 |     /**
17 |      * 保存状态
18 |      */
19 |     function saveDrawingSurface() {
20 |         //复制画布全部区域到对象中
21 |         drawingSurfaceImageData = context.getImageData(0, 0, canvas.x, canvas.y);
22 |     }
23 | 
24 |     function restoreDrawingSurface() {
25 |         //粘贴复制的内容覆盖context
26 |         context.putImageData(drawingSurfaceImageData,0,0);
27 |     }
28 | 
29 |     //Event handles……
30 | 
31 |     /**
32 |      * 当鼠标进入画布时保存旧状态
33 |      * @param ev
34 |      */
35 |     canvas.onmousedown = function (ev) {
36 |         //……
37 |         saveDrawingSurface();
38 |         //……
39 |     };
40 | 
41 |     /**
42 |      * 当鼠标在画布中移动时，可以绘制网格线
43 |      * @param ev
44 |      */
45 |     canvas.onmousemove = function (ev) {
46 |         var loc = windowToCanvas(e);
47 | 
48 |         //如果在拖拽状态
49 |         if (dragging){
50 |             restoreDrawingSurface();
51 |             //……
52 | 
53 |             //如果要添加鼠标辅助线
54 |             if (guidewires){
55 |                 drawGuidewires(mousedown.x,mousedown.y);
56 |             }
57 | 
58 |         }
59 |     }
60 | 
61 |     /**
62 |      * 当鼠标移出画布时，回到旧状态
63 |      * @param ev
64 |      */
65 |     canvas.onmouseup = function (ev) {
66 |         //……
67 |         restoreDrawingSurface();
68 |     }
69 | 
70 | 
71 | 
72 | 
73 | 
74 |     // function drawGrid(strokeStyle,fillStyle) {
75 |     //     context.save();//保存这个绘图环境状态到栈中
76 |     //
77 |     //     context.fillStyle=fillStyle;
78 |     //     context.strokeStyle=strokeStyle;
79 |     //
80 |     //     //画网格...(代码省略)
81 |     //
82 |     //     context.restore();//从之前的状态从栈中释放
83 |     // }
84 | </script>
85 | </html>


--------------------------------------------------------------------------------
/Unit2/CutoutCircle.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>剪纸效果、镂空效果</title>
 6 | 
 7 | </head>
 8 | <body>
 9 | <canvas id="canvas" height="400" width="600"></canvas>
10 | </body>
11 | <script>
12 |     var canvas = document.getElementById('canvas');
13 |     context = canvas.getContext('2d');
14 | 
15 |     //Function……
16 | 
17 |     /**
18 |      *  画网格线
19 |      * @param context
20 |      * @param color
21 |      * @param stepX
22 |      * @param stepY
23 |      */
24 |     function drawGird(context, color, stepX, stepY) {
25 |         context.strokeStyle = color;
26 |         context.lineWidth = 0.5;
27 | 
28 |         for (var i = stepX + 0.5; i < context.canvas.width; i += stepX) {
29 |             context.beginPath();
30 |             context.moveTo(i, 0);
31 |             context.lineTo(i, context.canvas.height);
32 |             context.stroke();
33 |         }
34 | 
35 |         for (var i = stepY + 0.5; i < context.canvas.height; i += stepY) {
36 |             context.beginPath();
37 |             context.moveTo(0, i);
38 |             context.lineTo(context.canvas.width, i);
39 |             context.stroke();
40 |         }
41 |     }
42 | 
43 |     function drawTwoArcs() {
44 |         context.beginPath();
45 |         context.arc(300, 190, 150, 0, Math.PI * 2, false);
46 |         context.arc(300, 190, 100, 0, Math.PI * 2, true);
47 | 
48 |         context.fill();
49 |         context.shadowColor = undefined;
50 |         context.shadowOffsetX = 0;
51 |         context.shadowOffsetY = 0;
52 |         context.stroke();
53 | 
54 |     }
55 | 
56 |     function draw() {
57 |         context.clearRect(0, 0, canvas.width, canvas.height);
58 |         drawGird(context,'lightgray', 10, 10);
59 |         context.save();
60 | 
61 |         context.shadowColor = 'rgba(0,0,0,0.8)';
62 |         context.shadowOffsetX = 12;
63 |         context.shadowOffsetY = 12;
64 |         context.shadowBlur = 15;
65 |         drawTwoArcs();
66 |         context.restore();
67 | 
68 |     }
69 | 
70 |     //Init……
71 |     context.fillStyle = 'rgba(100,140,230,0.5)';
72 |     context.strokeStyle = context.fillStyle;
73 |     draw();
74 | </script>
75 | </html>


--------------------------------------------------------------------------------
/Unit2/PathStrokeFill.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>路径、描边和填充</title>
 6 | </head>
 7 | <body>
 8 | <canvas id="canvas" width="1000" height="800"></canvas>
 9 | </body>
10 | 
11 | <script>
12 |     var context = document.getElementById('canvas').getContext('2d');
13 | 
14 |     //Function……
15 | 
16 |     /**
17 |      * 画背景网格
18 |      */
19 |     function drawGrid(context, color, stepX, stepY) {
20 |         //网格线代码省略，可照搬前面章节代码
21 |     }
22 | 
23 |     //Initialization……
24 | 
25 |     drawGrid(context, 'lightgray', 10, 10);
26 | 
27 |     //设置属性
28 | 
29 |     context.font = '48pt Helvetica';
30 |     context.strokeStyle = 'blue';
31 |     context.fillStyle = 'red';
32 |     context.lineWidth = '2';
33 | 
34 |     //Text
35 | 
36 |     context.strokeText('Stroke', 60, 110);
37 |     context.fillText('Fill', 440, 110);
38 | 
39 |     context.strokeText('Stroke&Fill', 650, 110);
40 |     context.fillText('Stroke&Fill', 650, 110);
41 | 
42 |     //矩形……
43 | 
44 |     context.lineWidth = '5';
45 |     context.beginPath();
46 |     context.rect(80, 150, 150, 100);
47 |     context.stroke();
48 | 
49 |     context.beginPath();
50 |     context.rect(400, 150, 150, 100);
51 |     context.fill();
52 | 
53 |     context.beginPath();
54 |     context.rect(750, 150, 150, 100);
55 |     context.stroke();
56 |     context.fill();
57 | 
58 |     //开放路径
59 | 
60 |     context.beginPath();
61 |     context.arc(150,370,60,0,Math.PI*3/2);
62 |     context.stroke();
63 | 
64 |     context.beginPath();
65 |     context.arc(475,370,60,0,Math.PI*3/2);
66 |     context.fill();
67 | 
68 |     context.beginPath();
69 |     context.arc(820,370,60,0,Math.PI*3/2);
70 |     context.fill();
71 |     context.stroke();
72 | 
73 |     //闭合路径
74 | 
75 |     context.beginPath();
76 |     context.arc(150,550,60,0,Math.PI*3/2);
77 |     //路径从当前点回到起始点
78 |     context.closePath();
79 |     context.stroke();
80 | 
81 |     context.beginPath();
82 |     context.arc(475,550,60,0,Math.PI*3/2);
83 |     context.closePath();
84 |     context.fill();
85 | 
86 |     context.beginPath();
87 |     context.arc(820,550,60,0,Math.PI*3/2);
88 |     context.closePath();
89 |     context.fill();
90 |     context.stroke();
91 | </script>
92 | </html>


--------------------------------------------------------------------------------
/Unit2/Pattern.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>图案</title>
 6 |     <style>
 7 |         #canvas {
 8 |             background: #eeeeee;
 9 |             border: thin solid cornflowerblue;
10 |         }
11 | 
12 |         #radios {
13 |             padding: 10px;
14 |         }
15 |     </style>
16 | </head>
17 | <body>
18 | <p>点击不同的按钮查看不同的重复演示</p>
19 |     <div id="radios">
20 |         <input type="radio" id="repeatRadio" name="patternRadio" checked>repeat
21 |         <input type="radio" id="repeatXRadio" name="patternRadio">repeatX
22 |         <input type="radio" id="repeatYRadio" name="patternRadio">repeatY
23 |         <input type="radio" id="noRepeatRadio" name="patternRadio">noRepeat
24 |     </div>
25 | <canvas id="canvas" height="500" width="500"></canvas>
26 | </body>
27 |     <script>
28 |         var canvas = document.getElementById('canvas'),
29 |             context = canvas.getContext('2d'),
30 |             repeatRadio = document.getElementById('repeatRadio'),
31 |             repeatXRadio = document.getElementById('repeatXRadio'),
32 |             repeatYRadio = document.getElementById('repeatYRadio'),
33 |             noRepeatRadio = document.getElementById('noRepeatRadio'),
34 |             image = new Image();
35 |         
36 |         //Function……
37 |         
38 |         function fillCanvasWithPattern(repeatString) {
39 |             var pattern = context.createPattern(image,repeatString);
40 |             context.clearRect(0, 0, canvas.width, canvas.height);
41 |             context.fillStyle=pattern;
42 |             context.fillRect(0, 0, canvas.width, canvas.height);
43 |             context.fill();
44 |         }
45 | 
46 |         //Event……
47 | 
48 |         repeatRadio.onclick=function (ev) {
49 |             fillCanvasWithPattern('repeat');
50 |         };
51 |         repeatXRadio.onclick=function (ev) {
52 |             fillCanvasWithPattern('repeat-x');
53 |         };
54 |         repeatYRadio.onclick=function (ev) {
55 |             fillCanvasWithPattern('repeat-y');
56 |         };
57 |         noRepeatRadio.onclick=function (ev) {
58 |             fillCanvasWithPattern('no-repeat');
59 |         };
60 | 
61 |         //Initialization
62 | 
63 |         image.src='../images/smalltree.png';
64 |         image.onload=function (ev) {
65 |             fillCanvasWithPattern('repeat');
66 |         }
67 | 
68 | 
69 | 
70 |     </script>
71 | </html>


--------------------------------------------------------------------------------
/Unit2/TextScaleRotate.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>文本缩放并旋转</title>
 6 |     <style>
 7 |         #canvas {
 8 |             -webkit-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;
 9 |             -moz-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;
10 |             box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;
11 |             border: 1px solid cornflowerblue;
12 |             background: aqua;
13 |         }
14 |     </style>
15 | </head>
16 | 
17 | <body>
18 | <canvas id="canvas" width="600" height="420">
19 |     Canvas not supported
20 | </canvas>
21 | </body>
22 | <script>
23 |     'use strict';
24 | 
25 |     let canvas = document.getElementById('canvas'),
26 |         context = canvas.getContext('2d'),
27 |         text = '触发旋转',
28 |         angle = Math.PI / 50,
29 |         //顺时针方向
30 |         clockwise = true,
31 |         fontHeight = 128,
32 |         origin = {},
33 |         paused = true,
34 |         scale = 1.008;
35 | 
36 |     //Function……
37 | 
38 |     //画字
39 |     let drawText = () => {
40 |         context.fillText(text, 0, 0);
41 |         context.strokeText(text, 0, 0);
42 |     };
43 | 
44 |     //Event handlers……
45 | 
46 |     canvas.onclick = () => {
47 |         paused = !paused;
48 |         //当启动当时候
49 |         if (!paused) {
50 |             //调换旋转方向
51 |             clockwise = !clockwise;
52 | 
53 |             //减小缩放尺寸
54 |             scale = 1 / scale;
55 |         }
56 |     };
57 | 
58 |     //Animation……
59 | 
60 |     setInterval(() => {
61 |         if (!paused) {
62 |             //清楚缩放后的画布
63 |             context.clearRect(-origin.x, -origin.y, canvas.width, canvas.height);
64 |             //以angle角度旋转画布
65 |             context.rotate(clockwise ? angle : -angle);
66 |             //以scale比例缩放画布
67 |             context.scale(scale,scale);
68 | 
69 |             drawText();
70 |         }
71 |     }, 1000 / 60);
72 | 
73 |     //Init……
74 | 
75 |     context.font = fontHeight + 'px Palatino';
76 | 
77 |     context.fillStyle = 'cornflowerblue';
78 |     context.strokeStyle = 'yellow';
79 | 
80 |     context.shadowColor = 'rgba(100, 100, 150, 0.8)';
81 |     context.shadowOffsetX = 5;
82 |     context.shadowOffsetY = 5;
83 |     context.shadowBlur = 10;
84 | 
85 |     context.textAlign = 'center';
86 |     context.textBaseline = 'middle';
87 | 
88 |     origin.x=canvas.width/2;
89 |     origin.y=canvas.height/2;
90 | 
91 |     //将坐标轴平移到中心位置
92 |     context.transform(1,0,0,1,origin.x,origin.y);
93 | 
94 |     drawText();
95 | 
96 | </script>
97 | </html>


--------------------------------------------------------------------------------
/Unit2/PolygonSimple.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>简单的多边形</title>
 6 | </head>
 7 | <body>
 8 | 
 9 | <canvas id="canvas"></canvas>
10 | <p>试试选择不同的边数</p>
11 | <label for="sidesSelects">多边形边数</label>
12 | <select id="sidesSelects">
13 |     <option selected value="3">3</option>
14 |     <option value="4">4</option>
15 |     <option value="5">5</option>
16 |     <option value="6">6</option>
17 |     <option value="7">7</option>
18 |     <option value="8">8</option>
19 |     <option value="9">9</option>
20 | </select>
21 | </body>
22 | <script>
23 |     'use strict';
24 | 
25 |     let canvas = document.getElementById('canvas'),
26 |         context = canvas.getContext('2d'),
27 | 
28 |         sidesSelect = document.getElementById('sidesSelects'),
29 | 
30 | 
31 | 
32 |         Point = function (x, y) {
33 |             this.x = x;
34 |             this.y = y;
35 |         };
36 | 
37 |     //Function……
38 |     /**
39 |      * 获得多边形的所有外接圆顶点
40 |      * @param centerX
41 |      * @param centerY
42 |      * @param radius
43 |      * @param sides
44 |      * @param startAngle
45 |      */
46 |     function getPolygonPoints(centerX,centerY,radius,sides,startAngle) {
47 |         let points = [],
48 |             //这里的angle是基于钟表0点的位置开始计算，0点位置为0度，3点位置为π/2度
49 |             angle = startAngle||0;
50 | 
51 |         for (let i=0;i<sides;++i){
52 |             points.push(new Point(centerX+radius*Math.sin(angle),centerY+radius*Math.cos(angle)));
53 |             angle += 2*Math.PI/sides;
54 |         }
55 | 
56 |         return points;
57 |     }
58 | 
59 |     /**
60 |      * 根据每个顶点的位置，创建多边形的路径
61 |      * @param centerX
62 |      * @param centerY
63 |      * @param radius
64 |      * @param sides
65 |      * @param startAngle
66 |      */
67 |     function createPolygonPath(centerX,centerY,radius,sides,startAngle) {
68 |         let points = getPolygonPoints(centerX,centerY,radius,sides,startAngle);
69 | 
70 |         context.beginPath();
71 |         context.moveTo(points[0].x,points[0].y);
72 | 
73 |         for (let i=0;i<sides;++i){
74 |             context.lineTo(points[i].x,points[i].y);
75 |         }
76 |         context.closePath();
77 |     }
78 | 
79 |     /**
80 |      * 绘制多边形
81 |      */
82 |     function drawRubberbandShape() {
83 |         createPolygonPath(canvas.width/2,canvas.height/2,canvas.width/4,parseInt(sidesSelect.value),0);
84 |         context.stroke();
85 |     }
86 | 
87 |     drawRubberbandShape();
88 | 
89 |     //event
90 |     sidesSelect.onchange=function () {
91 |         context.clearRect(0,0,canvas.width,canvas.height);
92 |         drawRubberbandShape();
93 |     }
94 | </script>
95 | </html>
96 | 


--------------------------------------------------------------------------------
/Unit2/GridBackground.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>网格背景</title>
  6 |     <style>
  7 |         body {
  8 |             line-height: 2em;
  9 |         }
 10 | 
 11 |         #canvas {
 12 |             position: absolute;
 13 |             top: 0;
 14 |             left: 0;
 15 |         }
 16 | 
 17 |         h1 {
 18 |             text-align: center;
 19 |         }
 20 | 
 21 |         h2 {
 22 |             margin: 0 20%;
 23 |         }
 24 | 
 25 |         p {
 26 |             margin: 0 20%;
 27 |             text-indent: 2em;
 28 |         }
 29 |     </style>
 30 | </head>
 31 | <body>
 32 | <h1>欢迎来到CanvasStudy</h1>
 33 | <hr/>
 34 | <h2>第一节</h2>
 35 | <p>欢迎来到我的Canvas教程，在这里你可以学到关于Canvas更加详细的应用，充分了解Canvas的特性，希望得到您的支持。</p>
 36 | <p>我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。
 37 |     教程介绍、教程目录等能在README里查阅。
 38 |     传送门：<a href="https://github.com/827652549/CanvasStudy">https://github.com/827652549/CanvasStudy</a>
 39 | </p>
 40 | <h2>第二节</h2>
 41 | <p>欢迎来到我的Canvas教程，在这里你可以学到关于Canvas更加详细的应用，充分了解Canvas的特性，希望得到您的支持。</p>
 42 | <p>我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。
 43 |     教程介绍、教程目录等能在README里查阅。
 44 |     传送门：<a href="https://github.com/827652549/CanvasStudy">https://github.com/827652549/CanvasStudy</a>
 45 | </p>
 46 | <canvas id="canvas" height="100%" width="100%">canvas not supported</canvas>
 47 | </body>
 48 | <script>
 49 |     var canvas = document.getElementById('canvas'),
 50 |         context = canvas.getContext('2d');
 51 | 
 52 |     //初始化
 53 |     AutoCanvas();
 54 |     drawGrid('lightgray', 10, 10);
 55 | 
 56 |     //窗口伸缩监听
 57 |     window.onresize = function () {
 58 |         AutoCanvas();
 59 |         drawGrid('lightgray', 10, 10);
 60 |     };
 61 | 
 62 |     /**
 63 |      * 画网格
 64 |      * @param color 网格线颜色
 65 |      * @param stepX 格子横向间距
 66 |      * @param stepY 格子垂直间距
 67 |      */
 68 |     function drawGrid(color, stepX, stepY) {
 69 |         context.save();
 70 |         context.strokeStyle = color;
 71 |         context.lineWidth = 0.5;
 72 |         for (var i = stepX + 0.5;
 73 |              i < context.canvas.width; i += stepX) {
 74 |             context.beginPath();
 75 |             context.moveTo(i, 0);
 76 |             context.lineTo(i, context.canvas.height);
 77 |             context.stroke();
 78 |         }
 79 | 
 80 |         for (var i = stepY + 0.5;
 81 |              i < context.canvas.height; i += stepY) {
 82 |             context.beginPath();
 83 |             context.moveTo(0, i);
 84 |             context.lineTo(context.canvas.width, i);
 85 |             context.stroke();
 86 |         }
 87 | 
 88 |         context.restore();
 89 |     }
 90 | 
 91 |     /**
 92 |      * 自动更改画布，当浏览器窗口大小改变当时候调用
 93 |      * @constructor
 94 |      */
 95 |     function AutoCanvas() {
 96 |         canvas.height = window.innerHeight;
 97 |         canvas.width = window.innerWidth;
 98 |     }
 99 | </script>
100 | </html>


--------------------------------------------------------------------------------
/Unit2/QuadraticCurveTriangle.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>圆角三角形，二次方贝塞尔曲线</title>
 6 | </head>
 7 | <body>
 8 | <canvas id="canvas" height="400" width="400" style="border: 1px solid black"></canvas>
 9 | </body>
10 | <script>
11 |     'use strict';
12 | 
13 |     let canvas = document.getElementById('canvas'),
14 |     context = canvas.getContext('2d'),
15 |     TRIANGLE_MARGIN=30,
16 |     POINT_RADIUS=7,
17 |     points=[
18 |         //右下角控制点
19 |         {x:canvas.width-TRIANGLE_MARGIN,y:canvas.height-TRIANGLE_MARGIN},
20 |         //右下角锚点
21 |         {x:canvas.width-TRIANGLE_MARGIN*2,y:canvas.height-TRIANGLE_MARGIN},
22 |         //左控制点
23 |         {x:POINT_RADIUS,y:canvas.height/2},
24 |         //左锚点
25 |         {x:TRIANGLE_MARGIN,y:canvas.height/2-TRIANGLE_MARGIN},
26 |         //右上角控制点
27 |         {x:canvas.width-TRIANGLE_MARGIN,y:TRIANGLE_MARGIN},
28 |         //右上角锚点
29 |         {x:canvas.width-TRIANGLE_MARGIN,y:TRIANGLE_MARGIN*2}
30 |     ];
31 | 
32 |     //Function……
33 |     /**
34 |      * 绘制锚点或控制点的方法封装，以不同的颜色参数绘制
35 |      * @param x
36 |      * @param y
37 |      * @param strokeStyle
38 |      * @param fillStyle
39 |      */
40 |     function drawPoint(x,y,strokeStyle,fillStyle) {
41 |         context.beginPath();
42 |         context.fillStyle=fillStyle;
43 |         context.strokeStyle=strokeStyle;
44 |         context.lineWidth = 0.5;
45 |         context.arc(x,y,POINT_RADIUS,0,Math.PI*2,false);
46 |         context.fill();
47 |         context.stroke();
48 |     }
49 | 
50 |     /**
51 |      * 绘制所有的贝塞尔带你，锚点或控制点
52 |      */
53 |     function drawBezierPoints() {
54 |         let i,
55 |             strokeStyle,
56 |             fillStyle;
57 |         for (i=0;i<points.length;i++) {
58 |             fillStyle = i%2===0?'white':'blue';
59 |             strokeStyle=i%2===0?'blue':'white';
60 |             drawPoint(points[i].x,points[i].y,strokeStyle,fillStyle);
61 |         }
62 |     }
63 | 
64 |     /**
65 |      * 绘制圆角矩形
66 |      */
67 |     function drawArcTriangle() {
68 |         context.strokeStyle='#999999';
69 |         context.fillStyle='cornflowerblue';
70 | 
71 |         //从右上角的锚点开始绘制
72 |         context.moveTo(canvas.width-TRIANGLE_MARGIN,TRIANGLE_MARGIN*2);
73 | 
74 |         context.lineTo(canvas.width-TRIANGLE_MARGIN,canvas.height-TRIANGLE_MARGIN*2);
75 | 
76 |         context.quadraticCurveTo(points[0].x,points[0].y,points[1].x,points[1].y);
77 | 
78 |         context.lineTo(TRIANGLE_MARGIN,canvas.height/2+TRIANGLE_MARGIN);
79 | 
80 |         context.quadraticCurveTo(points[2].x,points[2].y,points[3].x,points[3].y);
81 | 
82 |         context.lineTo(canvas.width-TRIANGLE_MARGIN*2,TRIANGLE_MARGIN);
83 | 
84 |         context.quadraticCurveTo(points[4].x,points[4].y,points[5].x,points[5].y);
85 |         context.fill();
86 |         context.stroke();
87 |     }
88 | 
89 |     //Init……
90 |     context.clearRect(0,0,canvas.width,canvas.height);
91 |     drawArcTriangle();
92 |     drawBezierPoints();
93 | </script>
94 | </html>


--------------------------------------------------------------------------------
/Unit2/MoveRect.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>拖拽小方块</title>
  6 | 
  7 |     <style>
  8 |         #canvas {
  9 |             cursor: default;
 10 |             border: 1px solid black;
 11 |         }
 12 |     </style>
 13 | </head>
 14 | <body>
 15 | <canvas id="canvas" width="400" height="400">Canvas not supported</canvas>
 16 | <p>拖拽方块并实时重绘</p>
 17 | </body>
 18 | <script>
 19 |     'use strict';
 20 | 
 21 |     let canvas = document.getElementById('canvas'),
 22 |         context = canvas.getContext('2d'),
 23 | 
 24 |         //初始时的矩形属性
 25 |         initX = 10,
 26 |         initY = 10,
 27 |         initWidth = 100,
 28 |         initHeight = 100,
 29 | 
 30 |         isDrag = false,
 31 | 
 32 |         //多边形存储在这个地方
 33 |         polygons = {
 34 |             fillStyle: 'lightgray',
 35 |             strokeStyle: 'blue',
 36 |             loc: {x: 0, y: 0},
 37 |             height: initHeight,
 38 |             width: initWidth,
 39 |             offsetX: 0,
 40 |             offsetY: 0
 41 |         };
 42 | 
 43 | 
 44 |     //Function……
 45 | 
 46 |     /**
 47 |      * 绘制初试状态的矩形
 48 |      */
 49 |     let drawInitRect = () => {
 50 |         context.fillStyle = polygons.fillStyle;
 51 |         context.strokeStyle = polygons.strokeStyle;
 52 |         context.rect(initX, initY, initWidth, initHeight);
 53 |         polygons.loc.x = initX;
 54 |         polygons.loc.y = initY;
 55 |         polygons.width = initWidth;
 56 |         polygons.height = initHeight;
 57 |         context.fill();
 58 |         context.stroke();
 59 |     };
 60 |     //Event……
 61 | 
 62 |     /**
 63 |      * 当鼠标按下式
 64 |      * @param ev
 65 |      */
 66 |     canvas.onmousedown = ev => {
 67 |         isDrag = context.isPointInPath(ev.clientX, ev.clientY);
 68 |         polygons.offsetX = ev.clientX - polygons.loc.x;
 69 |         polygons.offsetY = ev.clientY - polygons.loc.y;
 70 |         polygons.loc.x = ev.clientX;
 71 |         polygons.loc.y = ev.clientY;
 72 |     };
 73 | 
 74 |     /**
 75 |      * 鼠标移动时
 76 |      * @param ev
 77 |      */
 78 |     canvas.onmousemove = ev => {
 79 |         if (isDrag) {
 80 |             context.beginPath();
 81 |             context.clearRect(0, 0, canvas.width, canvas.height);
 82 |             context.rect(ev.clientX - polygons.offsetX, ev.clientY - polygons.offsetY, initWidth, initHeight);
 83 |             context.fill();
 84 |             context.stroke();
 85 |         } else {
 86 |             //鼠标经过的时候是否需要变小手
 87 |             if (context.isPointInPath(ev.clientX, ev.clientY)) {
 88 |                 //设置光标状态
 89 |                 canvas.style.cursor = 'pointer';
 90 |             } else {
 91 |                 canvas.style.cursor = 'default';
 92 | 
 93 |             }
 94 | 
 95 |         }
 96 |     };
 97 | 
 98 |     canvas.onmouseup = ev => {
 99 |         isDrag = false;
100 |         polygons.loc.x = ev.clientX - polygons.offsetX;
101 |         polygons.loc.y = ev.clientY - polygons.offsetY;
102 | 
103 |     };
104 | 
105 |     //Init……
106 | 
107 |     drawInitRect();
108 | </script>
109 | </html>


--------------------------------------------------------------------------------
/Unit2/BezierCurve.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>三次方贝塞尔曲线</title>
  6 | </head>
  7 | <body>
  8 | <canvas id="canvas" height="400" width="800"></canvas>
  9 | </body>
 10 | <script>
 11 |     'use strict';
 12 | 
 13 |     let canvas = document.getElementById('canvas'),
 14 |         context = canvas.getContext('2d'),
 15 |         endPoints = [{x:130,y:70},{x:430,y:270}],
 16 |         controlPoints = [{x:130,y:250},{x:450,y:70}];
 17 | 
 18 |     //Function……
 19 | 
 20 |     /**
 21 |      * 画网格线
 22 |      * @param color
 23 |      * @param stepX
 24 |      * @param steoY
 25 |      */
 26 |     function drawGrid(color,stepX,stepY) {
 27 |         context.save();
 28 | 
 29 |         context.shadowColor = undefined;
 30 |         context.shadowOffsetX = 0;
 31 |         context.shadowOffsetY = 0;
 32 | 
 33 |         context.strokeStyle = color;
 34 |         context.fillStyle = '#ffffff';
 35 |         context.lineWidth = 0.5;
 36 |         context.fillRect(0, 0, context.canvas.width,
 37 |             context.canvas.height);
 38 | 
 39 |         for (var i = stepX + 0.5;
 40 |              i < context.canvas.width; i += stepX) {
 41 |             context.beginPath();
 42 |             context.moveTo(i, 0);
 43 |             context.lineTo(i, context.canvas.height);
 44 |             context.stroke();
 45 |         }
 46 | 
 47 |         for (var i = stepY + 0.5;
 48 |              i < context.canvas.height; i += stepY) {
 49 |             context.beginPath();
 50 |             context.moveTo(0, i);
 51 |             context.lineTo(context.canvas.width, i);
 52 |             context.stroke();
 53 |         }
 54 | 
 55 |         context.restore();
 56 |     }
 57 | 
 58 | 
 59 | 
 60 |     /**
 61 |      * 贝塞尔曲线
 62 |      */
 63 |     function drawBezierCurve() {
 64 |         context.strokeStyle = 'blue';
 65 | 
 66 |         context.beginPath();
 67 |         context.moveTo(endPoints[0].x,endPoints[0].y);
 68 |         context.bezierCurveTo(controlPoints[0].x,controlPoints[0].y,controlPoints[1].x,controlPoints[1].y,endPoints[1].x,endPoints[1].y);
 69 |         context.stroke();
 70 |     }
 71 | 
 72 |     /**
 73 |      * 绘制锚点
 74 |      */
 75 |     function drawEndPoints() {
 76 |         context.strokeStyle='blue';
 77 |         context.fillStyle='red';
 78 | 
 79 |         endPoints.forEach(
 80 |             function (point) {
 81 |                 context.beginPath();
 82 |                 context.arc(point.x,point.y,5,0,Math.PI*2,false);
 83 |                 context.stroke();
 84 |                 context.fill();
 85 |             }
 86 |         );
 87 |     }
 88 | 
 89 |     /**
 90 |      * 绘制控制点
 91 |      */
 92 |     function drawControlPoints() {
 93 |         context.strokeStyle='yellow';
 94 |         context.fillStyle='blue';
 95 | 
 96 |         controlPoints.forEach(
 97 |             function (point) {
 98 |                 context.beginPath();
 99 |                 context.arc(point.x,point.y,5,0,Math.PI*2,false);
100 |                 context.stroke();
101 |                 context.fill();
102 |             }
103 |         );
104 |     }
105 | 
106 |     //Init……
107 |     drawGrid('lightgray',10,10);
108 | 
109 |     drawControlPoints();
110 |     drawEndPoints();
111 |     drawBezierCurve();
112 | </script>
113 | </html>


--------------------------------------------------------------------------------
/Unit2/PictureSynthesis.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>图像合成</title>
  6 |     <style>
  7 |         #canvas {
  8 |             border: 1px solid cornflowerblue;
  9 |             position: absolute;
 10 |             left: 150px;
 11 |             top: 10px;
 12 |             background: #eeeeee;
 13 |             border: thin solid #aaaaaa;
 14 |             cursor: pointer;
 15 |             -webkit-box-shadow: rgba(200, 200, 255, 0.9) 5px 5px 10px;
 16 |             -moz-box-shadow: rgba(200, 200, 255, 0.9) 5px 5px 10px;
 17 |             box-shadow: rgba(200, 200, 255, 0.9) 5px 5px 10px;
 18 |         }
 19 |     </style>
 20 | </head>
 21 | <body>
 22 | <select size="11" id="compositingSelect">
 23 |     <option value="source-atop">source-atop</option>
 24 |     <option value='source-in'>source-in</option>
 25 |     <option value='source-out'>source-out</option>
 26 |     <option value='source-over'>source-over (default)</option>
 27 |     <option value='destination-atop'>destination-atop</option>
 28 |     <option value='destination-in'>destination-in</option>
 29 |     <option value='destination-out'>destination-out</option>
 30 |     <option value='destination-over'>destination-over</option>
 31 |     <option value='lighter'>lighter</option>
 32 |     <option value='copy'>copy</option>
 33 |     <option value='xor'>xor</option>
 34 | </select>
 35 | <canvas id="canvas" width="600" height="420">Canvas not supports</canvas>
 36 | </body>
 37 | <script>
 38 |     'use strict';
 39 | 
 40 |     let context = document.getElementById('canvas').getContext('2d'),
 41 |         selectElement = document.getElementById('compositingSelect');
 42 | 
 43 |     //Function……
 44 | 
 45 |     /**
 46 |      * 绘制文字
 47 |      */
 48 |     let drawText = () => {
 49 |         context.save();
 50 | 
 51 |         context.shadowColor = 'rgba(100, 100, 150, 0.8)';
 52 |         context.shadowOffsetX = 5;
 53 |         context.shadowOffsetY = 5;
 54 |         context.shadowBlur = 10;
 55 | 
 56 |         context.fillStyle = 'cornflowerblue';
 57 |         context.fillText('苏一恒', 20, 250);
 58 | 
 59 |         context.strokeStyle = 'yellow';
 60 |         context.strokeText('苏一恒', 20, 250);
 61 | 
 62 | 
 63 |         context.restore();
 64 |     };
 65 | 
 66 |     //Event handlers……
 67 | 
 68 |     let windowToCanvas = (canvas, x, y) => {
 69 |         let bbox = canvas.getBoundingClientRect();
 70 |         return {
 71 |           x:x-bbox.left*(canvas.width/bbox.width),
 72 |           y:y-bbox.top*(canvas.height/bbox.height)
 73 |         };
 74 | 
 75 |     };
 76 | 
 77 |     context.canvas.onmousemove=e=>{
 78 |         let loc = windowToCanvas(context.canvas,e.clientX,e.clientY);
 79 |         context.clearRect(0,0,context.canvas.width,context.canvas.height);
 80 |         drawText();
 81 | 
 82 |         context.save();
 83 | 
 84 |         //设置选项即为全局合成属性
 85 |         context.globalCompositeOperation=selectElement.value;
 86 |         context.beginPath();
 87 |         context.arc(loc.x,loc.y,100,0,Math.PI*2,false);
 88 |         context.fillStyle='orange';
 89 |         context.stroke();
 90 |         context.fill();
 91 | 
 92 |         context.restore();
 93 |     }
 94 | 
 95 |     //Init……
 96 | 
 97 |     selectElement.selectedIndex=3;
 98 |     context.lineWidth=0.5;
 99 |     context.font='128pt Comic-sans';
100 |     drawText();
101 | </script>
102 | </html>


--------------------------------------------------------------------------------
/Unit3/TextFont.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--
  3 |     Author:苏一恒
  4 |     Date:2019-09-29 14:52
  5 |     Motto:
  6 |         The best time to plant trees is ten years ago, followed by now. 
  7 |         种树最好的时间是十年前，其次是现在。
  8 |  -->
  9 | <html lang="zh-CN">
 10 | <head>
 11 |     <meta charset="UTF-8">
 12 |     <title>文字的font属性</title>
 13 |     <style>
 14 |         body {
 15 |             background: #eeeeee;
 16 |         }
 17 | 
 18 |         #canvas {
 19 |             background: #ffffff;
 20 |             margin-top: 5px;
 21 |             margin-left: 10px;
 22 |             -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
 23 |             -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
 24 |             box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
 25 |             border: 1px solid rgba(0, 0, 0, 0.2);
 26 |         }
 27 |     </style>
 28 | </head>
 29 | <body>
 30 | <canvas id='canvas' width="850" height="440">canvas not supports</canvas>
 31 | 
 32 | <script>
 33 |     'use strict';
 34 | 
 35 |     let canvas = document.getElementById('canvas'),
 36 |         context = canvas.getContext('2d'),
 37 | 
 38 |         /**
 39 |          * 左列的所有字体 palatino字体集的变种
 40 |          * @type {Array}
 41 |          *
 42 |          * palatino是一种常用的英文衬线字体
 43 |          */
 44 |         LEFT_COLUMN_FONTS = [
 45 |             '2em palatino', 'bolder 2em palatino',
 46 |             'lighter 2em patatino', 'italic 2em palatino',
 47 |             'oblique small-caps 24px palatino', 'bold 14pt palatino',
 48 |             'xx-large palatino', 'italic xx-larrge palatino'
 49 |         ],
 50 | 
 51 |         /**
 52 |          * 右边的所有字体 网络安全字型
 53 |          * @type {string[]}
 54 |          */
 55 |         RIGHT_COLUMN_FONTS = [
 56 |             'oblique 1.5em lucida console', 'x-large fantasy',
 57 |             'italic 28px monaco', 'italic large copperplate',
 58 |             '36px century', '28px tahoma',
 59 |             '28px impact', '1.7em verdana'
 60 |         ],
 61 | 
 62 |         LEFT_COLUMN_X = 50,
 63 |         RIGHT_COLUMN_X = 500,
 64 |         DELTA_Y = 50,
 65 |         TOP_Y = 50,
 66 |         y = 0;
 67 | 
 68 |     /**
 69 |      * 绘制背景网格线
 70 |      */
 71 |     let drawBackground = () => {
 72 |         let STEP_Y = 12,
 73 |             i = context.canvas.height;
 74 | 
 75 |         context.strokeStyle = 'rgba(0,0,200,0.225)';
 76 |         context.lineWidth = 0.5;
 77 | 
 78 |         context.save();
 79 |         context.restore();
 80 | 
 81 |         while (i > STEP_Y * 4) {
 82 |             context.beginPath();
 83 |             context.moveTo(0, i);
 84 |             context.lineTo(context.canvas.width, i);
 85 |             context.stroke();
 86 |             i -= STEP_Y;
 87 |         }
 88 | 
 89 |         context.save();
 90 | 
 91 |         context.strokeStyle = 'rgba(100,0,0,0.3)';
 92 |         context.lineWidth = 1;
 93 | 
 94 |         context.beginPath();
 95 | 
 96 |         context.moveTo(35, 0);
 97 |         context.lineTo(35, context.canvas.height);
 98 |         context.stroke();
 99 | 
100 |         context.restore();
101 |     };
102 | 
103 |     drawBackground();
104 | 
105 |     context.fillStyle = 'blue';
106 | 
107 |     //绘制左列所有文本
108 |     LEFT_COLUMN_FONTS.forEach(font => {
109 |         context.font = font;
110 |         context.fillText(font, LEFT_COLUMN_X, y += DELTA_Y);
111 |     });
112 | 
113 |     y = 0;
114 | 
115 |     //绘制右列所有文本
116 |     RIGHT_COLUMN_FONTS.forEach( function (font) {
117 |         context.font = font;
118 |         context.fillText(font, RIGHT_COLUMN_X, y += DELTA_Y);
119 |     });
120 | 
121 | </script>
122 | </body>
123 | </html>


--------------------------------------------------------------------------------
/Unit3/TextGradientsAndPatterns.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>渐变色文本和图案文本</title>
  6 | 
  7 | <style>
  8 |     body {
  9 |         background: #eeeeee;
 10 |     }
 11 | 
 12 |     #canvas {
 13 |         background: #ffffff;
 14 |         cursor: pointer;
 15 |         margin-left: 10px;
 16 |         margin-top: 10px;
 17 |         -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
 18 |         -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
 19 |         box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
 20 |     }
 21 | 
 22 |     #controls {
 23 |         margin: 10px;
 24 |     }
 25 | </style>
 26 | </head>
 27 | 
 28 | <body>
 29 | <canvas id='canvas' width='950' height='520'>
 30 |     Canvas not supported
 31 | </canvas>
 32 | 
 33 | <script>
 34 |     'use strict';
 35 | 
 36 |     let canvas = document.getElementById('canvas'),
 37 |         context = canvas.getContext('2d'),
 38 |         image = new Image(),
 39 |         gradient = context.createLinearGradient(0,0,canvas.width,canvas.height),
 40 |         text = 'Canvas',
 41 | 
 42 |         //在图片加载之后创建一个'模式'
 43 |         pattern;
 44 | 
 45 |     //Function……
 46 | 
 47 |     /**
 48 |      * 画背景
 49 |      */
 50 |     let drawBackground=()=> {
 51 | 
 52 |             let STEP_Y = 12,
 53 |                 TOP_MARGIN = STEP_Y * 4,
 54 |                 LEFT_MARGIN = 35,
 55 |                 i = context.canvas.height;
 56 | 
 57 |             context.save();
 58 | 
 59 |             context.strokeStyle = 'lightgray';
 60 |             context.lineWidth = 0.5;
 61 | 
 62 |             while (i > TOP_MARGIN) { // Draw horizontal lines from bottom up
 63 |                 context.beginPath();
 64 |                 context.moveTo(0, i);
 65 |                 context.lineTo(context.canvas.width, i);
 66 |                 context.stroke();
 67 |                 i -= STEP_Y;
 68 |             }
 69 | 
 70 |             // Draw vertical line
 71 |             context.strokeStyle = 'rgba(100,0,0,0.3)';
 72 |             context.lineWidth = 1;
 73 | 
 74 |             context.beginPath();
 75 |             context.moveTo(LEFT_MARGIN, 0);
 76 |             context.lineTo(LEFT_MARGIN, context.canvas.height);
 77 |             context.stroke();
 78 | 
 79 |             context.restore();
 80 | 
 81 |     };
 82 | 
 83 |     /**
 84 |      * 画渐变文本
 85 |      */
 86 |     let drawGradientText=()=>{
 87 |         context.fillStyle=gradient;
 88 |         context.fillText(text, 65, 200);
 89 |         context.strokeText(text, 65, 200);
 90 |     };
 91 | 
 92 |     /**
 93 |      * 画图案文本
 94 |      */
 95 |     let drawPatternText = () => {
 96 |         context.fillStyle = pattern;
 97 |         context.fillText(text, 65, 450);
 98 |         context.strokeText(text, 65, 450);
 99 |     };
100 | 
101 |     //Event
102 | 
103 |     image.onload=()=>{
104 |         pattern=context.createPattern(image,'repeat');
105 |         drawPatternText();
106 |     };
107 | 
108 |     //Init……
109 | 
110 |     //添加图案
111 |     image.src = '../images/redball.png';
112 | 
113 |     context.font = '256px Palatino';
114 |     context.strokeStyle = 'cornflowerblue';
115 | 
116 |     context.shadowOffsetX = 5;
117 |     context.shadowOffsetY = 5;
118 |     context.shadowBlur    = 10;
119 | 
120 |     //创建渐变
121 |     gradient.addColorStop(0,'blue');
122 |     gradient.addColorStop(0.25,'yellow');
123 |     gradient.addColorStop(0.5, 'white');
124 |     gradient.addColorStop(0.75, 'red');
125 |     gradient.addColorStop(1.0,'blue');
126 | 
127 |     drawBackground();
128 |     drawGradientText();
129 | </script>
130 | 
131 | </body>
132 | </html>


--------------------------------------------------------------------------------
/Unit1/Clock.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>Canvas时钟</title>
  6 | </head>
  7 | <body>
  8 | <canvas id="canvas" height="400" width="400">Canvas不支持。</canvas>
  9 | </body>
 10 | <script>
 11 |     var canvas = document.getElementById('canvas'),
 12 |         context = canvas.getContext('2d'),
 13 |         //字体高度
 14 |         FONT_HEIGHT = 15,
 15 |         //外边距
 16 |         MARGIN = 35,
 17 |         //时钟半径（留出外边距放数字）
 18 |         RADIUS = canvas.width / 2 - MARGIN,
 19 |         //分针和秒针的截断长度
 20 |         HAND_TRUNCATION = canvas.width / 25,
 21 |         //时针截断长度
 22 |         HOUR_HAND_TRUNCATION = canvas.width / 10,
 23 |         //数字空隙
 24 |         NUMERAL_SPACING = 20,
 25 |         //指针的全长度
 26 |         HAND_RADUIS = RADIUS + NUMERAL_SPACING;
 27 | 
 28 | 
 29 |     //方法……
 30 | 
 31 |     /**
 32 |      * 绘制一个钟面的圆形
 33 |      */
 34 |     function drawCircle() {
 35 |         //开始定义路径
 36 |         context.beginPath();
 37 |         //创建一个圆形路径
 38 |         context.arc(canvas.width / 2, canvas.height / 2, RADIUS, 0, Math.PI * 2, true);
 39 |         context.stroke();
 40 |     }
 41 | 
 42 |     /**
 43 |      * 绘制时钟周围的数字
 44 |      */
 45 |     function drawNumerals() {
 46 |         var numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
 47 |             angle = 0,
 48 |             numeralWidth = 0;
 49 | 
 50 |         numerals.forEach(function (numeral) {
 51 |             //设置每个数字的角度。注意：数字3是0度
 52 |             angle = Math.PI / 6 * (numeral - 3);
 53 |             //在向画布输出之前，以像素度量各数字的宽度
 54 |             numeralWidth = context.measureText(numeral).width;
 55 |             //利用三角函数，填充每个数字到对应位置
 56 |             context.fillText(numeral, canvas.width / 2 + Math.cos(angle) * (HAND_RADUIS) - numeralWidth / 2, canvas.height / 2 + Math.sin(angle) * (HAND_RADUIS) + FONT_HEIGHT / 3);
 57 |         })
 58 |     }
 59 | 
 60 |     /**
 61 |      * 绘制时钟中心的实心圆
 62 |      */
 63 |     function drawCenter() {
 64 |         context.beginPath();
 65 |         context.arc(canvas.width / 2, canvas.height / 2, 5, 0, Math.PI * 2, true);
 66 |         context.fill();
 67 |     }
 68 | 
 69 |     /**
 70 |      * 绘制某个钟表的指针的通用方法
 71 |      * @param loc
 72 |      * @param isHour
 73 |      */
 74 |     function drawHand(loc, isHour) {
 75 |         //设置指针角度
 76 |         var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2,
 77 |             //判断哪个指针
 78 |             handRadius = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION : RADIUS - HAND_TRUNCATION;
 79 | 
 80 |         context.moveTo(canvas.width / 2, canvas.height / 2);
 81 |         context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius, canvas.height / 2 + Math.sin(angle) * handRadius);
 82 |         context.stroke();
 83 |     }
 84 | 
 85 |     /**
 86 |      * 以当前时间绘制钟表的三个表针，实现drawHand方法
 87 |      */
 88 |     function drawHands() {
 89 |         var date = new Date,
 90 |             hour = date.getHours();
 91 | 
 92 |         //24小时制转化为12小时制
 93 |         hour = hour > 12 ? hour - 12 : hour;
 94 | 
 95 |         //为了满足drawHand()中loc/60以平均角度的操作，需要将时针*5。因为12*5=60，可以当成分针/秒针进行调用函数
 96 |         drawHand(hour * 5 + (date.getMinutes() / 60) * 5, true);
 97 |         drawHand(date.getMinutes(), false);
 98 |         drawHand(date.getSeconds(), false);
 99 |     }
100 | 
101 |     /**
102 |      * 画出当前时刻钟表的各个组件
103 |      */
104 |     function drawClock() {
105 |         //清空全部canvas的像素内容
106 |         context.clearRect(0, 0, canvas.width, canvas.height);
107 | 
108 |         drawCircle();
109 |         drawCenter();
110 |         drawHands();
111 |         drawNumerals();
112 |     }
113 | 
114 |     //Initialization------初始化
115 |     context.font = FONT_HEIGHT + 'px Arial';
116 |     loop = setInterval(drawClock, 1000);
117 | 
118 | </script>
119 | </html>


--------------------------------------------------------------------------------
/Unit3/TextAlignAndTextBaseline.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--
  3 |     Author:苏一恒
  4 |     Date:2019/10/9 14:10
  5 |     Motto:
  6 |         The best time to plant trees is ten years ago, followed by now. 
  7 |         种树最好的时间是十年前，其次是现在。
  8 |  -->
  9 | <html lang="zh-CN">
 10 | <head>
 11 |     <meta charset="UTF-8">
 12 |     <title>文字定位</title>
 13 |     <style>
 14 |         body {
 15 |             background: #eeeeee;
 16 |         }
 17 | 
 18 |         #canvas {
 19 |             background: #ffffff;
 20 |             margin-top: 5px;
 21 |             margin-left: 10px;
 22 |             -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
 23 |             -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
 24 |             box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
 25 |             border: 1px solid rgba(0, 0, 0, 0.2);
 26 |         }
 27 |     </style>
 28 | </head>
 29 | <body>
 30 | <canvas id='canvas' width='780' height='440'>canvas not supports</canvas>
 31 | 
 32 | <script>
 33 |     'use strict';
 34 | 
 35 |     let canvas = document.getElementById('canvas'),
 36 |         context = canvas.getContext('2d'),
 37 |         fontHeight = 24,
 38 |         alignValues = ['start','center','end'],
 39 |         baseLineValue = ['top','middle','bottom','alphabetic', 'ideographic', 'hanging'],
 40 |         x,y;
 41 | 
 42 |     //Function……
 43 | 
 44 |     let drawGrid=(color, stepx, stepy)=> {
 45 |         context.save();
 46 | 
 47 |         context.strokeStyle = color;
 48 |         context.fillStyle = '#ffffff';
 49 |         context.lineWidth = 0.5;
 50 |         context.fillRect(0, 0, context.canvas.width, context.canvas.height);
 51 | 
 52 |         for (let i = stepx + 0.5; i < context.canvas.width; i += stepx) {
 53 |             context.beginPath();
 54 |             context.moveTo(i, 0);
 55 |             context.lineTo(i, context.canvas.height);
 56 |             context.stroke();
 57 |         }
 58 | 
 59 |         for (let i = stepy + 0.5; i < context.canvas.height; i += stepy) {
 60 |             context.beginPath();
 61 |             context.moveTo(0, i);
 62 |             context.lineTo(context.canvas.width, i);
 63 |             context.stroke();
 64 |         }
 65 | 
 66 |         context.restore();
 67 |     };
 68 | 
 69 |     /**
 70 |      * 绘制（x，y）的标记点
 71 |      */
 72 |     let drawTextMarker=()=>{
 73 |       context.fillStyle='yellow';
 74 |       context.fillRect(x,y,7,7);
 75 |       context.strokeRect(x,y,7,7);
 76 |     };
 77 | 
 78 |     /**
 79 |      * 绘制文本
 80 |      * @param text
 81 |      * @param textAlign
 82 |      * @param textBaseLine
 83 |      */
 84 |     let drawText=(text,textAlign,textBaseLine)=>{
 85 |         if (textAlign)context.textAlign = textAlign;
 86 |         if (textBaseLine)context.textBaseline=textBaseLine;
 87 | 
 88 |         context.fillStyle='cornflowerblue';
 89 |         context.fillText(text,x,y);
 90 |     };
 91 | 
 92 |     /**
 93 |      * 绘制文本的线
 94 |      */
 95 |     let drawTextLine=()=>{
 96 |         context.strokeStyle='gray';
 97 | 
 98 |         context.beginPath();
 99 |         context.moveTo(x,y);
100 |         context.lineTo(x+738,y);
101 |         context.stroke();
102 |     };
103 | 
104 | 
105 |     //Init……
106 |     context.font='oblique normal bold 24px palatino';
107 | 
108 |     drawGrid('lightgray',10,10);
109 | 
110 |     for (let align = 0;align<alignValues.length;++align){
111 |         for (let baseline = 0;baseline<baseLineValue.length;baseline++){
112 |             x= 20+align*fontHeight*15;
113 |             y=20+baseline*fontHeight*3;
114 | 
115 |             drawText(alignValues[align]+'/'+baseLineValue[baseline],alignValues[align],baseLineValue[baseline]);
116 |             drawTextMarker();
117 |             drawTextLine();
118 |         }
119 |     }
120 | 
121 | </script>
122 | </body>
123 | </html>


--------------------------------------------------------------------------------
/Unit2/CutoutShape.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>绘制其他剪纸图形</title>
  6 | </head>
  7 | <body>
  8 | <canvas id="canvas" width="600" height="400"></canvas>
  9 | </body>
 10 | <script>
 11 |     var canvas = document.getElementById('canvas'),
 12 |         context= canvas.getContext('2d');
 13 |     
 14 |     //Function……
 15 | 
 16 |     /**
 17 |      * 画网格
 18 |      */
 19 |     function drawGird(color,stepX,stepY) {
 20 |         context.strokeStyle = color;
 21 |         context.lineWidth = 0.5;
 22 | 
 23 |         for (var i = stepX + 0.5; i < context.canvas.width; i += stepX) {
 24 |             context.beginPath();
 25 |             context.moveTo(i, 0);
 26 |             context.lineTo(i, context.canvas.height);
 27 |             context.stroke();
 28 |         }
 29 | 
 30 |         for (var i = stepY + 0.5; i < context.canvas.height; i += stepY) {
 31 |             context.beginPath();
 32 |             context.moveTo(0, i);
 33 |             context.lineTo(context.canvas.width, i);
 34 |             context.stroke();
 35 |         }
 36 |     }
 37 |     
 38 |     function draw() {
 39 |         context.clearRect(0,0,canvas.width,canvas.height);
 40 |         drawGird('lightgray',10,10);
 41 |         
 42 |         context.save();
 43 |         
 44 |         context.shadowColor='rgba(200,200,0,0.5)';
 45 |         context.shadowOffsetX=12;
 46 |         context.shadowOffsetY=12;
 47 |         context.shadowBlur=15;
 48 |         
 49 |         drawCutouts();
 50 |         strokeCutoutShapes();
 51 |         context.restore();
 52 |     }
 53 | 
 54 |     /**
 55 |      * 画那些需要镂空的图形
 56 |      */
 57 |     function drawCutouts() {
 58 |         context.beginPath();
 59 |         addOuterRectanglePath();//CW，CW代表Clockwise顺时针
 60 | 
 61 |         addCirclePath();//CCW,CCW代表counter-clockwise逆时针
 62 |         addRectanglePath();//CCW
 63 |         addTrianglePath();//CCW
 64 | 
 65 |         context.fill();//Cut out shapes
 66 |     }
 67 | 
 68 |     /**
 69 |      * 镂空描边
 70 |      */
 71 |     function strokeCutoutShapes() {
 72 |         context.save();
 73 | 
 74 |         context.strokeStyle='rgba(0,0,0,0.7)';
 75 |         context.beginPath();
 76 |         addOuterRectanglePath();//CW
 77 |         context.stroke();
 78 | 
 79 |         context.beginPath();
 80 |         addCirclePath();
 81 |         addRectanglePath();
 82 |         addTrianglePath();
 83 |         context.stroke();
 84 |     }
 85 | 
 86 |     /**
 87 |      * 重写rect方法，增加了顺序和逆序路径的参数
 88 |      * @param x
 89 |      * @param y
 90 |      * @param w
 91 |      * @param h
 92 |      * @param direction 顺序和逆序,布尔类型
 93 |      */
 94 |     function rect(x,y,w,h,direction) {
 95 |         if(direction){//CCW
 96 |             context.moveTo(x,y);
 97 |             context.lineTo(x,y+h);
 98 |             context.lineTo(x+w,y+h);
 99 |             context.lineTo(x+w,y);
100 |             context.closePath();
101 |         }else{
102 |             context.moveTo(x,y);
103 |             context.lineTo(x + w, y);
104 |             context.lineTo(x + w, y + h);
105 |             context.lineTo(x, y + h);
106 |             context.closePath();
107 |         }
108 |     }
109 | 
110 |     function addOuterRectanglePath() {
111 |         context.rect(110, 25, 370, 335);
112 |     }
113 | 
114 |     function addCirclePath() {
115 |         context.arc(300,300,40,0,Math.PI*2,true);
116 |     }
117 | 
118 |     function addRectanglePath() {
119 |         rect(310,55,70,35,true);
120 |     }
121 | 
122 |     function addTrianglePath() {
123 |         context.moveTo(400,200);
124 |         context.lineTo(250, 115);
125 |         context.lineTo(200, 200);
126 |         context.closePath();
127 |     }
128 | 
129 |     //Init……
130 |     context.fillStyle='goldenrod';
131 |     draw();
132 | </script>
133 | </html>


--------------------------------------------------------------------------------
/Unit3/TextStrokeFillShadow.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>文字的描边、填充、阴影</title>
  6 |     <style>
  7 |         body {
  8 |             background: #eeeeee;
  9 |         }
 10 | 
 11 |         #canvas {
 12 |             margin-left: 10px;
 13 |             -webkit-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;
 14 |             -moz-box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;
 15 |             box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px;
 16 |             border: 1px solid cornflowerblue;
 17 |             background: #ffffff;
 18 |         }
 19 | 
 20 |         #controls {
 21 |             margin: 10px;
 22 |         }
 23 |     </style>
 24 | </head>
 25 | 
 26 | <body>
 27 | <div id='controls'>
 28 |     <input id='strokeCheckbox' type='checkbox' checked/>Stroke
 29 |     <input id='fillCheckbox' type='checkbox' checked/>Fill
 30 |     <input id='shadowCheckbox' type='checkbox' checked/>Shadow
 31 | </div>
 32 | 
 33 | <canvas id='canvas' width='600' height='220'>
 34 |     Canvas not supported
 35 | </canvas>
 36 | 
 37 | <script>
 38 |     'use strict';
 39 | 
 40 |     let canvas = document.getElementById('canvas'),
 41 |         context = canvas.getContext('2d'),
 42 | 
 43 |         fillCheckbox = document.getElementById('fillCheckbox'),
 44 |         strokeCheckbox = document.getElementById('strokeCheckbox'),
 45 |         shadowCheckbox = document.getElementById('shadowCheckbox'),
 46 | 
 47 |         //要展示的内容
 48 |         text = 'HTML5';
 49 | 
 50 |     //Function……
 51 | 
 52 |     let draw = () => {
 53 |         context.clearRect(0, 0, canvas.width, canvas.height);
 54 | 
 55 |         drawBackground();
 56 | 
 57 |         if (shadowCheckbox.checked) {
 58 |             turnShadowsOn();
 59 |         } else {
 60 |             turnShadowsOff();
 61 |         }
 62 | 
 63 |         drawText();
 64 |     };
 65 | 
 66 |     /**
 67 |      * 背景网格线
 68 |      */
 69 |     let drawBackground = () => {
 70 |         let STEP_Y = 12,
 71 |             TOP_MARGIN = STEP_Y * 4,
 72 |             LEFT_MARGIN = STEP_Y * 3,
 73 |             i = context.canvas.height;
 74 | 
 75 |         // 垂直线
 76 | 
 77 |         context.strokeStyle = 'lightgray';
 78 |         context.lineWidth = 0.5;
 79 | 
 80 |         while (i > TOP_MARGIN) {
 81 |             context.beginPath();
 82 |             context.moveTo(0, i);
 83 |             context.lineTo(context.canvas.width, i);
 84 |             context.stroke();
 85 |             i -= STEP_Y;
 86 |         }
 87 | 
 88 |         // 水平线
 89 | 
 90 |         context.strokeStyle = 'rgba(100,0,0,0.3)';
 91 |         context.lineWidth = 1;
 92 | 
 93 |         context.beginPath();
 94 | 
 95 |         context.moveTo(LEFT_MARGIN, 0);
 96 |         context.lineTo(LEFT_MARGIN, context.canvas.height);
 97 |         context.stroke();
 98 |     };
 99 | 
100 |     let turnShadowsOn = () => {
101 |         context.shadowColor='rgba(0,0,0,0.8)';
102 |         context.shadowOffsetX = 5;
103 |         context.shadowOffsetY = 5;
104 |         context.shadowBlur = 10;
105 |     };
106 | 
107 |     let turnShadowsOff = () => {
108 |         context.shadowColor=undefined;
109 |         context.shadowOffsetX = 0;
110 |         context.shadowOffsetY = 0;
111 |         context.shadowBlur = 0;
112 |     };
113 | 
114 |     let drawText = () => {
115 |         let TEXT_X = 65,
116 |             TEXT_Y = canvas.height / 2 + 35;
117 | 
118 |         context.strokeStyle = 'blue';
119 |         if (fillCheckbox.checked) context.fillText(text, TEXT_X, TEXT_Y);
120 |         if (strokeCheckbox.checked) context.strokeText(text, TEXT_X, TEXT_Y);
121 |     };
122 | 
123 |     //Event……
124 |     fillCheckbox.onchange = draw;
125 |     strokeCheckbox.onchange = draw;
126 |     shadowCheckbox.onchange = draw;
127 | 
128 |     // Init
129 |     context.font = '128px Palatino';
130 |     context.lineWidth = 1.0;
131 |     context.fillStyle = 'cornflowerblue';
132 | 
133 |     turnShadowsOn();
134 | 
135 |     draw();
136 | 
137 | </script>
138 | </body>
139 | </html>


--------------------------------------------------------------------------------
/Unit1/Listener/SpriteSheets.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>精灵表坐标查看器Sprite Sheets</title>
  6 |     <style>
  7 |         body{
  8 |             background: #dddddd;
  9 |         }
 10 |         #canvas {
 11 |             position: absolute;
 12 |             left: 0px;
 13 |             top: 50px;
 14 |             margin: 20px;
 15 |             background: #ffffff;
 16 |             border: thin inset rgba(100,150,230,0.5);
 17 |             cursor: pointer;
 18 |         }
 19 |         #readout {
 20 |             margin-top: 10px;
 21 |             margin-left: 15px;
 22 |             color: blue;
 23 |         }
 24 |     </style>
 25 | </head>
 26 | <body>
 27 |     <!--用来显示当前精灵表坐标-->
 28 |     <div id="readout"></div>
 29 |     <p>加载一个图片，移动鼠标，获取基于canvas鼠标处精灵表坐标</p>
 30 |     <canvas id="canvas" width="500" height="250">Canvas not supported</canvas>
 31 | </body>
 32 | <script>
 33 |     var canvas = document.getElementById('canvas'),
 34 |         context = canvas.getContext('2d'),
 35 |         readout = document.getElementById('readout'),
 36 |         spritesheet = new Image();
 37 | 
 38 |     //Function……
 39 |     /**
 40 |      * 窗口坐标转化为基于Canvas的坐标
 41 |      * @param canvas
 42 |      * @param x
 43 |      * @param y
 44 |      * @returns {{x: number, y: number}}
 45 |      */
 46 |     function windowToCanvas(canvas,x,y) {
 47 |         //获取canvas元素的边界框(bouding box)
 48 |         var bbox = canvas.getBoundingClientRect();
 49 |         return {
 50 |             x:x-bbox.left*(canvas.width/bbox.width),
 51 |             y:y-bbox.top*(canvas.height/bbox.height)
 52 |         }
 53 |     }
 54 | 
 55 |     /**
 56 |      * 绘制背景条纹线
 57 |      */
 58 |     function drawBackground(){
 59 |         var VERTICAL_LINE_SOACING = 12,
 60 |             i = context.canvas.height;
 61 | 
 62 |         context.clearRect(0,0,canvas.width,canvas.height);
 63 |         context.strokeStyle = 'lightgray';
 64 |         context.lineWidth = 0.5;
 65 | 
 66 |         //预留出顶部4个网格线高的长度供图片占位,从地部划线，从下往上
 67 |         while (i>VERTICAL_LINE_SOACING*4){
 68 |             context.beginPath();
 69 |             context.moveTo(0,i);
 70 |             context.lineTo(canvas.width,i);
 71 |             context.stroke();
 72 | 
 73 |             i -= VERTICAL_LINE_SOACING;
 74 | 
 75 |         }
 76 |     }
 77 | 
 78 |     /**
 79 |      * 绘制精灵表
 80 |      */
 81 |     function drawSpritesheet(){
 82 |         //将图片画到画布上
 83 |         context.drawImage(spritesheet,0,0);
 84 |     }
 85 | 
 86 |     /**
 87 |      * 绘制光标跟随网格线
 88 |      * @param x
 89 |      * @param y
 90 |      */
 91 |     function drawGuidelines(x, y) {
 92 |         context.strokeStyle='rgba(0,0,230,0.8)';
 93 |         context.lineWidth = 0.5;
 94 |         drawVerticalLine(x);
 95 |         drawHorizontalLine(y);
 96 | 
 97 |     }
 98 | 
 99 |     function updateReadout(x,y){
100 |         //四舍五入到0位小数并输出到#readout元素中
101 |         readout.innerHTML='('+x.toFixed(0)+','+y.toFixed(0)+')';
102 |     }
103 | 
104 |     /**
105 |      * 绘制水平跟随线
106 |      * @param y
107 |      */
108 |     function drawHorizontalLine(y) {
109 |         context.beginPath();
110 |         context.moveTo(0, y + 0.5);
111 |         context.lineTo(context.canvas.width, y + 0.5);
112 |         context.stroke();
113 |     }
114 | 
115 |     /**
116 |      * 绘制垂直跟随线
117 |      * @param x
118 |      */
119 |     function drawVerticalLine(x){
120 |         context.beginPath();
121 |         context.moveTo(x+0.5,0);
122 |         context.lineTo(x+0.5,context.canvas.height);
123 |         context.stroke();
124 |     }
125 | 
126 |     //Event handlers……
127 |     canvas.onmousemove = function (e) {
128 |         var loc = windowToCanvas(canvas, e.clientX, e.clientY);
129 | 
130 |         drawBackground();
131 |         drawSpritesheet();
132 |         drawGuidelines(loc.x, loc.y);
133 |         updateReadout(loc.x, loc.y);
134 |     };
135 | 
136 |     //Initialization
137 | 
138 |     //设置图片路径
139 |     spritesheet.src='../../images/running-sprite-sheet.png';
140 |     //加载图片之后画精灵表
141 |     spritesheet.onload = function (ev) {
142 |         drawSpritesheet();
143 |     };
144 |     //画背景
145 |     drawBackground();
146 | 
147 | </script>
148 | </html>


--------------------------------------------------------------------------------
/Unit2/Axis.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>坐标轴的绘制</title>
  6 | </head>
  7 | <body>
  8 | <canvas id="canvas" width="400" height="300"></canvas>
  9 | </body>
 10 | <script>
 11 |     var canvas = document.getElementById('canvas'),
 12 |         context = canvas.getContext('2d'),
 13 | 
 14 |         //外边距
 15 |         AXIS_MARGIN = 40,
 16 |         //原点，将之设置到画布左下区域
 17 |         AXIS_ORIGIN = {x: AXIS_MARGIN, y: canvas.height - AXIS_MARGIN},
 18 | 
 19 |         //y轴顶点位置
 20 |         AXIS_TOP = AXIS_MARGIN,
 21 |         //x轴顶点位置
 22 |         AXIS_RIGHT = canvas.width - AXIS_MARGIN,
 23 | 
 24 |         //横向刻度线间距
 25 |         HORIZONTAL_TICK_SPACING = 10,
 26 |         //垂直刻度线间距
 27 |         VERTICAL_TICK_SPACING = 10,
 28 | 
 29 |         //X轴长度
 30 |         AXIS_WIDTH = AXIS_RIGHT - AXIS_ORIGIN.x,
 31 |         //y轴长度
 32 |         AXIS_HEIGHT = AXIS_ORIGIN.y - AXIS_TOP,
 33 | 
 34 |         //y轴上的点的最大值
 35 |         NUM_VERTICAL_TICKS = AXIS_HEIGHT / VERTICAL_TICK_SPACING,
 36 |         NUM_HORIZONTAL_TICKS = AXIS_WIDTH / HORIZONTAL_TICK_SPACING,
 37 | 
 38 |         TICK_WIDTH = 10,
 39 |         TICKS_LINEWIDTH = 0.5,
 40 |         TICK_COLOR = 'navy',
 41 | 
 42 |         AXIS_LINEWIDTH = 1.0,
 43 |         AXIS_COLOR = 'blue';
 44 | 
 45 |     //Function……
 46 | 
 47 |     /**
 48 |      * 背景网格线
 49 |      * @param color
 50 |      * @param stepX
 51 |      * @param stepY
 52 |      */
 53 |     function drawGrid(color, stepX, stepY) {
 54 |         context.strokeStyle = color;
 55 |         context.lineWidth = 0.5;
 56 | 
 57 |         for (var i = stepX + 0.5; i < context.canvas.width; i += stepX) {
 58 |             context.beginPath();
 59 |             context.moveTo(i, 0);
 60 |             context.lineTo(i, context.canvas.height);
 61 |             context.stroke();
 62 |         }
 63 | 
 64 |         for (var i = stepY + 0.5; i < context.canvas.height; i += stepY) {
 65 |             context.beginPath();
 66 |             context.moveTo(0, i);
 67 |             context.lineTo(context.canvas.width, i);
 68 |             context.stroke();
 69 |         }
 70 |     }
 71 | 
 72 |     /**
 73 |      * 画坐标轴
 74 |      */
 75 |     function drawAxis() {
 76 |         context.save();
 77 |         context.strokeStyle = AXIS_COLOR;
 78 |         context.lineWidth = AXIS_LINEWIDTH;
 79 | 
 80 |         drawHorizontalAxis();
 81 |         drawVerticalAxis();
 82 | 
 83 |         context.lineWidth = TICKS_LINEWIDTH;
 84 |         context.strokeStyle = TICK_COLOR;
 85 | 
 86 |         drawVerticalAxisTicks();
 87 |         drawHorizontalAxisTicks();
 88 | 
 89 |         context.restore();
 90 |     }
 91 | 
 92 |     /**
 93 |      * 绘制x轴
 94 |      */
 95 |     function drawHorizontalAxis() {
 96 |         context.beginPath();
 97 |         context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
 98 |         context.lineTo(AXIS_RIGHT, AXIS_ORIGIN.y);
 99 |         context.stroke();
100 |     }
101 | 
102 | 
103 |     /**
104 |      * 绘制y轴
105 |      */
106 |     function drawVerticalAxis() {
107 |         context.beginPath();
108 |         context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
109 |         context.lineTo(AXIS_ORIGIN.x, AXIS_TOP);
110 |         context.stroke();
111 |     }
112 | 
113 |     /**
114 |      * 绘制y轴刻度
115 |      */
116 |     function drawVerticalAxisTicks() {
117 |         //小刻度长度的临时变量
118 |         var deltaY;
119 | 
120 |         for (var i = 1; i < NUM_VERTICAL_TICKS; i++) {
121 |             context.beginPath();
122 |             //每5第五个刻度为长的小刻度
123 |             if (i % 5 === 0) deltaY = TICK_WIDTH;
124 |             else deltaY = TICK_WIDTH / 2;
125 | 
126 |             context.moveTo(AXIS_ORIGIN.x - deltaY, AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
127 |             context.lineTo(AXIS_ORIGIN.x + deltaY, AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
128 |             context.stroke();
129 | 
130 |         }
131 |     }
132 | 
133 |     /**
134 |      * 绘制x轴刻度
135 |      */
136 |     function drawHorizontalAxisTicks() {
137 |         //小刻度长度的临时变量
138 |         var deltaY;
139 | 
140 |         for (var i = 1; i < NUM_HORIZONTAL_TICKS; i++) {
141 |             context.beginPath();
142 |             //每5第五个刻度为长的小刻度
143 |             if (i % 5 === 0) deltaY = TICK_WIDTH;
144 |             else deltaY = TICK_WIDTH / 2;
145 | 
146 |             context.moveTo(AXIS_ORIGIN.x+i*HORIZONTAL_TICK_SPACING, AXIS_ORIGIN.y-deltaY);
147 |             context.lineTo(AXIS_ORIGIN.x+i*HORIZONTAL_TICK_SPACING, AXIS_ORIGIN.y+deltaY);
148 |             context.stroke();
149 | 
150 |         }
151 |     }
152 | 
153 |     //Initialization……
154 |     drawGrid('lightgray', 10, 10);
155 |     drawAxis();
156 | 
157 | </script>
158 | </html>


--------------------------------------------------------------------------------
/Unit2/AxisScale.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>坐标轴的缩放</title>
  6 | </head>
  7 | <body>
  8 | <canvas id="canvas" width="400" height="300" style="border: 1px solid black"></canvas>
  9 | </body>
 10 | <script>
 11 |     var canvas = document.getElementById('canvas'),
 12 |         context = canvas.getContext('2d'),
 13 | 
 14 |         //外边距
 15 |         AXIS_MARGIN = 40,
 16 |         //原点，将之设置到画布左下区域
 17 |         AXIS_ORIGIN = {x: AXIS_MARGIN, y: canvas.height - AXIS_MARGIN},
 18 | 
 19 |         //y轴顶点位置
 20 |         AXIS_TOP = AXIS_MARGIN,
 21 |         //x轴顶点位置
 22 |         AXIS_RIGHT = canvas.width - AXIS_MARGIN,
 23 | 
 24 |         //横向刻度线间距
 25 |         HORIZONTAL_TICK_SPACING = 10,
 26 |         //垂直刻度线间距
 27 |         VERTICAL_TICK_SPACING = 10,
 28 | 
 29 |         //X轴长度
 30 |         AXIS_WIDTH = AXIS_RIGHT - AXIS_ORIGIN.x,
 31 |         //y轴长度
 32 |         AXIS_HEIGHT = AXIS_ORIGIN.y - AXIS_TOP,
 33 | 
 34 |         //y轴上的点的最大值
 35 |         NUM_VERTICAL_TICKS = AXIS_HEIGHT / VERTICAL_TICK_SPACING,
 36 |         NUM_HORIZONTAL_TICKS = AXIS_WIDTH / HORIZONTAL_TICK_SPACING,
 37 | 
 38 |         TICK_WIDTH = 10,
 39 |         TICKS_LINEWIDTH = 0.5,
 40 |         TICK_COLOR = 'navy',
 41 | 
 42 |         AXIS_LINEWIDTH = 1.0,
 43 |         AXIS_COLOR = 'blue';
 44 | 
 45 |     //Function……
 46 | 
 47 | 
 48 | 
 49 | 
 50 |     /**
 51 |      * 背景网格线
 52 |      * @param color
 53 |      * @param stepX
 54 |      * @param stepY
 55 |      */
 56 |     function drawGrid(color, stepX, stepY) {
 57 |         context.strokeStyle = color;
 58 |         context.lineWidth = 0.5;
 59 | 
 60 |         for (var i = stepX + 0.5; i < context.canvas.width; i += stepX) {
 61 |             context.beginPath();
 62 |             context.moveTo(i, 0);
 63 |             context.lineTo(i, context.canvas.height);
 64 |             context.stroke();
 65 |         }
 66 | 
 67 |         for (var i = stepY + 0.5; i < context.canvas.height; i += stepY) {
 68 |             context.beginPath();
 69 |             context.moveTo(0, i);
 70 |             context.lineTo(context.canvas.width, i);
 71 |             context.stroke();
 72 |         }
 73 |     }
 74 | 
 75 |     /**
 76 |      * 画坐标轴
 77 |      */
 78 |     function drawAxis() {
 79 |         context.save();
 80 |         context.strokeStyle = AXIS_COLOR;
 81 |         context.lineWidth = AXIS_LINEWIDTH;
 82 | 
 83 |         drawHorizontalAxis();
 84 |         drawVerticalAxis();
 85 | 
 86 |         context.lineWidth = TICKS_LINEWIDTH;
 87 |         context.strokeStyle = TICK_COLOR;
 88 | 
 89 |         drawVerticalAxisTicks();
 90 |         drawHorizontalAxisTicks();
 91 | 
 92 |         context.restore();
 93 |     }
 94 | 
 95 |     /**
 96 |      * 绘制x轴
 97 |      */
 98 |     function drawHorizontalAxis() {
 99 |         context.beginPath();
100 |         context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
101 |         context.lineTo(AXIS_RIGHT, AXIS_ORIGIN.y);
102 |         context.stroke();
103 |     }
104 | 
105 | 
106 |     /**
107 |      * 绘制y轴
108 |      */
109 |     function drawVerticalAxis() {
110 |         context.beginPath();
111 |         context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
112 |         context.lineTo(AXIS_ORIGIN.x, AXIS_TOP);
113 |         context.stroke();
114 |     }
115 | 
116 |     /**
117 |      * 绘制y轴刻度
118 |      */
119 |     function drawVerticalAxisTicks() {
120 |         //小刻度长度的临时变量
121 |         var deltaY;
122 | 
123 |         for (var i = 1; i < NUM_VERTICAL_TICKS; i++) {
124 |             context.beginPath();
125 |             //每5第五个刻度为长的小刻度
126 |             if (i % 5 === 0) deltaY = TICK_WIDTH;
127 |             else deltaY = TICK_WIDTH / 2;
128 | 
129 |             context.moveTo(AXIS_ORIGIN.x - deltaY, AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
130 |             context.lineTo(AXIS_ORIGIN.x + deltaY, AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
131 |             context.stroke();
132 | 
133 |         }
134 |     }
135 | 
136 |     /**
137 |      * 绘制x轴刻度
138 |      */
139 |     function drawHorizontalAxisTicks() {
140 |         //小刻度长度的临时变量
141 |         var deltaY;
142 | 
143 |         for (var i = 1; i < NUM_HORIZONTAL_TICKS; i++) {
144 |             context.beginPath();
145 |             //每5第五个刻度为长的小刻度
146 |             if (i % 5 === 0) deltaY = TICK_WIDTH;
147 |             else deltaY = TICK_WIDTH / 2;
148 | 
149 |             context.moveTo(AXIS_ORIGIN.x+i*HORIZONTAL_TICK_SPACING, AXIS_ORIGIN.y-deltaY);
150 |             context.lineTo(AXIS_ORIGIN.x+i*HORIZONTAL_TICK_SPACING, AXIS_ORIGIN.y+deltaY);
151 |             context.stroke();
152 | 
153 |         }
154 |     }
155 | 
156 |     //Initialization……
157 |     context.scale(2,2);
158 |     drawGrid('lightgray', 10, 10);
159 |     drawAxis();
160 | 
161 | </script>
162 | </html>


--------------------------------------------------------------------------------
/Unit2/AxisRotate.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>坐标轴的旋转</title>
  6 | </head>
  7 | <body>
  8 | <canvas id="canvas" width="400" height="300" style="border: 1px solid black"></canvas>
  9 | </body>
 10 | <script>
 11 |     var canvas = document.getElementById('canvas'),
 12 |         context = canvas.getContext('2d'),
 13 | 
 14 |         //外边距
 15 |         AXIS_MARGIN = 40,
 16 |         //原点，将之设置到画布左下区域
 17 |         AXIS_ORIGIN = {x: AXIS_MARGIN, y: canvas.height - AXIS_MARGIN},
 18 | 
 19 |         //y轴顶点位置
 20 |         AXIS_TOP = AXIS_MARGIN,
 21 |         //x轴顶点位置
 22 |         AXIS_RIGHT = canvas.width - AXIS_MARGIN,
 23 | 
 24 |         //横向刻度线间距
 25 |         HORIZONTAL_TICK_SPACING = 10,
 26 |         //垂直刻度线间距
 27 |         VERTICAL_TICK_SPACING = 10,
 28 | 
 29 |         //X轴长度
 30 |         AXIS_WIDTH = AXIS_RIGHT - AXIS_ORIGIN.x,
 31 |         //y轴长度
 32 |         AXIS_HEIGHT = AXIS_ORIGIN.y - AXIS_TOP,
 33 | 
 34 |         //y轴上的点的最大值
 35 |         NUM_VERTICAL_TICKS = AXIS_HEIGHT / VERTICAL_TICK_SPACING,
 36 |         NUM_HORIZONTAL_TICKS = AXIS_WIDTH / HORIZONTAL_TICK_SPACING,
 37 | 
 38 |         TICK_WIDTH = 10,
 39 |         TICKS_LINEWIDTH = 0.5,
 40 |         TICK_COLOR = 'navy',
 41 | 
 42 |         AXIS_LINEWIDTH = 1.0,
 43 |         AXIS_COLOR = 'blue';
 44 | 
 45 |     //Function……
 46 | 
 47 | 
 48 | 
 49 | 
 50 |     /**
 51 |      * 背景网格线
 52 |      * @param color
 53 |      * @param stepX
 54 |      * @param stepY
 55 |      */
 56 |     function drawGrid(color, stepX, stepY) {
 57 |         context.strokeStyle = color;
 58 |         context.lineWidth = 0.5;
 59 | 
 60 |         for (var i = stepX + 0.5; i < context.canvas.width; i += stepX) {
 61 |             context.beginPath();
 62 |             context.moveTo(i, 0);
 63 |             context.lineTo(i, context.canvas.height);
 64 |             context.stroke();
 65 |         }
 66 | 
 67 |         for (var i = stepY + 0.5; i < context.canvas.height; i += stepY) {
 68 |             context.beginPath();
 69 |             context.moveTo(0, i);
 70 |             context.lineTo(context.canvas.width, i);
 71 |             context.stroke();
 72 |         }
 73 |     }
 74 | 
 75 |     /**
 76 |      * 画坐标轴
 77 |      */
 78 |     function drawAxis() {
 79 |         context.save();
 80 |         context.strokeStyle = AXIS_COLOR;
 81 |         context.lineWidth = AXIS_LINEWIDTH;
 82 | 
 83 |         drawHorizontalAxis();
 84 |         drawVerticalAxis();
 85 | 
 86 |         context.lineWidth = TICKS_LINEWIDTH;
 87 |         context.strokeStyle = TICK_COLOR;
 88 | 
 89 |         drawVerticalAxisTicks();
 90 |         drawHorizontalAxisTicks();
 91 | 
 92 |         context.restore();
 93 |     }
 94 | 
 95 |     /**
 96 |      * 绘制x轴
 97 |      */
 98 |     function drawHorizontalAxis() {
 99 |         context.beginPath();
100 |         context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
101 |         context.lineTo(AXIS_RIGHT, AXIS_ORIGIN.y);
102 |         context.stroke();
103 |     }
104 | 
105 | 
106 |     /**
107 |      * 绘制y轴
108 |      */
109 |     function drawVerticalAxis() {
110 |         context.beginPath();
111 |         context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
112 |         context.lineTo(AXIS_ORIGIN.x, AXIS_TOP);
113 |         context.stroke();
114 |     }
115 | 
116 |     /**
117 |      * 绘制y轴刻度
118 |      */
119 |     function drawVerticalAxisTicks() {
120 |         //小刻度长度的临时变量
121 |         var deltaY;
122 | 
123 |         for (var i = 1; i < NUM_VERTICAL_TICKS; i++) {
124 |             context.beginPath();
125 |             //每5第五个刻度为长的小刻度
126 |             if (i % 5 === 0) deltaY = TICK_WIDTH;
127 |             else deltaY = TICK_WIDTH / 2;
128 | 
129 |             context.moveTo(AXIS_ORIGIN.x - deltaY, AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
130 |             context.lineTo(AXIS_ORIGIN.x + deltaY, AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
131 |             context.stroke();
132 | 
133 |         }
134 |     }
135 | 
136 |     /**
137 |      * 绘制x轴刻度
138 |      */
139 |     function drawHorizontalAxisTicks() {
140 |         //小刻度长度的临时变量
141 |         var deltaY;
142 | 
143 |         for (var i = 1; i < NUM_HORIZONTAL_TICKS; i++) {
144 |             context.beginPath();
145 |             //每5第五个刻度为长的小刻度
146 |             if (i % 5 === 0) deltaY = TICK_WIDTH;
147 |             else deltaY = TICK_WIDTH / 2;
148 | 
149 |             context.moveTo(AXIS_ORIGIN.x+i*HORIZONTAL_TICK_SPACING, AXIS_ORIGIN.y-deltaY);
150 |             context.lineTo(AXIS_ORIGIN.x+i*HORIZONTAL_TICK_SPACING, AXIS_ORIGIN.y+deltaY);
151 |             context.stroke();
152 | 
153 |         }
154 |     }
155 | 
156 |     //Initialization……
157 |     context.rotate(-Math.PI/8);
158 |     drawGrid('lightgray', 10, 10);
159 |     drawAxis();
160 | 
161 | </script>
162 | </html>


--------------------------------------------------------------------------------
/Unit2/AxisTranslate.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>坐标轴的平移</title>
  6 | </head>
  7 | <body>
  8 | <canvas id="canvas" width="400" height="300" style="border: 1px solid black"></canvas>
  9 | </body>
 10 | <script>
 11 |     var canvas = document.getElementById('canvas'),
 12 |         context = canvas.getContext('2d'),
 13 | 
 14 |         //外边距
 15 |         AXIS_MARGIN = 40,
 16 |         //原点，将之设置到画布左下区域
 17 |         AXIS_ORIGIN = {x: AXIS_MARGIN, y: canvas.height - AXIS_MARGIN},
 18 | 
 19 |         //y轴顶点位置
 20 |         AXIS_TOP = AXIS_MARGIN,
 21 |         //x轴顶点位置
 22 |         AXIS_RIGHT = canvas.width - AXIS_MARGIN,
 23 | 
 24 |         //横向刻度线间距
 25 |         HORIZONTAL_TICK_SPACING = 10,
 26 |         //垂直刻度线间距
 27 |         VERTICAL_TICK_SPACING = 10,
 28 | 
 29 |         //X轴长度
 30 |         AXIS_WIDTH = AXIS_RIGHT - AXIS_ORIGIN.x,
 31 |         //y轴长度
 32 |         AXIS_HEIGHT = AXIS_ORIGIN.y - AXIS_TOP,
 33 | 
 34 |         //y轴上的点的最大值
 35 |         NUM_VERTICAL_TICKS = AXIS_HEIGHT / VERTICAL_TICK_SPACING,
 36 |         NUM_HORIZONTAL_TICKS = AXIS_WIDTH / HORIZONTAL_TICK_SPACING,
 37 | 
 38 |         TICK_WIDTH = 10,
 39 |         TICKS_LINEWIDTH = 0.5,
 40 |         TICK_COLOR = 'navy',
 41 | 
 42 |         AXIS_LINEWIDTH = 1.0,
 43 |         AXIS_COLOR = 'blue';
 44 | 
 45 |     //Function……
 46 | 
 47 | 
 48 | 
 49 | 
 50 |     /**
 51 |      * 背景网格线
 52 |      * @param color
 53 |      * @param stepX
 54 |      * @param stepY
 55 |      */
 56 |     function drawGrid(color, stepX, stepY) {
 57 |         context.strokeStyle = color;
 58 |         context.lineWidth = 0.5;
 59 | 
 60 |         for (var i = stepX + 0.5; i < context.canvas.width; i += stepX) {
 61 |             context.beginPath();
 62 |             context.moveTo(i, 0);
 63 |             context.lineTo(i, context.canvas.height);
 64 |             context.stroke();
 65 |         }
 66 | 
 67 |         for (var i = stepY + 0.5; i < context.canvas.height; i += stepY) {
 68 |             context.beginPath();
 69 |             context.moveTo(0, i);
 70 |             context.lineTo(context.canvas.width, i);
 71 |             context.stroke();
 72 |         }
 73 |     }
 74 | 
 75 |     /**
 76 |      * 画坐标轴
 77 |      */
 78 |     function drawAxis() {
 79 |         context.save();
 80 |         context.strokeStyle = AXIS_COLOR;
 81 |         context.lineWidth = AXIS_LINEWIDTH;
 82 | 
 83 |         drawHorizontalAxis();
 84 |         drawVerticalAxis();
 85 | 
 86 |         context.lineWidth = TICKS_LINEWIDTH;
 87 |         context.strokeStyle = TICK_COLOR;
 88 | 
 89 |         drawVerticalAxisTicks();
 90 |         drawHorizontalAxisTicks();
 91 | 
 92 |         context.restore();
 93 |     }
 94 | 
 95 |     /**
 96 |      * 绘制x轴
 97 |      */
 98 |     function drawHorizontalAxis() {
 99 |         context.beginPath();
100 |         context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
101 |         context.lineTo(AXIS_RIGHT, AXIS_ORIGIN.y);
102 |         context.stroke();
103 |     }
104 | 
105 | 
106 |     /**
107 |      * 绘制y轴
108 |      */
109 |     function drawVerticalAxis() {
110 |         context.beginPath();
111 |         context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
112 |         context.lineTo(AXIS_ORIGIN.x, AXIS_TOP);
113 |         context.stroke();
114 |     }
115 | 
116 |     /**
117 |      * 绘制y轴刻度
118 |      */
119 |     function drawVerticalAxisTicks() {
120 |         //小刻度长度的临时变量
121 |         var deltaY;
122 | 
123 |         for (var i = 1; i < NUM_VERTICAL_TICKS; i++) {
124 |             context.beginPath();
125 |             //每5第五个刻度为长的小刻度
126 |             if (i % 5 === 0) deltaY = TICK_WIDTH;
127 |             else deltaY = TICK_WIDTH / 2;
128 | 
129 |             context.moveTo(AXIS_ORIGIN.x - deltaY, AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
130 |             context.lineTo(AXIS_ORIGIN.x + deltaY, AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
131 |             context.stroke();
132 | 
133 |         }
134 |     }
135 | 
136 |     /**
137 |      * 绘制x轴刻度
138 |      */
139 |     function drawHorizontalAxisTicks() {
140 |         //小刻度长度的临时变量
141 |         var deltaY;
142 | 
143 |         for (var i = 1; i < NUM_HORIZONTAL_TICKS; i++) {
144 |             context.beginPath();
145 |             //每5第五个刻度为长的小刻度
146 |             if (i % 5 === 0) deltaY = TICK_WIDTH;
147 |             else deltaY = TICK_WIDTH / 2;
148 | 
149 |             context.moveTo(AXIS_ORIGIN.x+i*HORIZONTAL_TICK_SPACING, AXIS_ORIGIN.y-deltaY);
150 |             context.lineTo(AXIS_ORIGIN.x+i*HORIZONTAL_TICK_SPACING, AXIS_ORIGIN.y+deltaY);
151 |             context.stroke();
152 | 
153 |         }
154 |     }
155 | 
156 |     //Initialization……
157 |     context.translate(30,30);
158 |     drawGrid('lightgray', 10, 10);
159 |     drawAxis();
160 | 
161 | </script>
162 | </html>


--------------------------------------------------------------------------------
/Unit2/AxisMirro.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>坐标轴的镜像</title>
  6 | </head>
  7 | <body>
  8 | <canvas id="canvas" width="400" height="300" style="border: 1px solid black"></canvas>
  9 | </body>
 10 | <script>
 11 |     var canvas = document.getElementById('canvas'),
 12 |         context = canvas.getContext('2d'),
 13 | 
 14 |         //外边距
 15 |         AXIS_MARGIN = 40,
 16 |         //原点，将之设置到画布左下区域
 17 |         AXIS_ORIGIN = {x: AXIS_MARGIN, y: canvas.height - AXIS_MARGIN},
 18 | 
 19 |         //y轴顶点位置
 20 |         AXIS_TOP = AXIS_MARGIN,
 21 |         //x轴顶点位置
 22 |         AXIS_RIGHT = canvas.width - AXIS_MARGIN,
 23 | 
 24 |         //横向刻度线间距
 25 |         HORIZONTAL_TICK_SPACING = 10,
 26 |         //垂直刻度线间距
 27 |         VERTICAL_TICK_SPACING = 10,
 28 | 
 29 |         //X轴长度
 30 |         AXIS_WIDTH = AXIS_RIGHT - AXIS_ORIGIN.x,
 31 |         //y轴长度
 32 |         AXIS_HEIGHT = AXIS_ORIGIN.y - AXIS_TOP,
 33 | 
 34 |         //y轴上的点的最大值
 35 |         NUM_VERTICAL_TICKS = AXIS_HEIGHT / VERTICAL_TICK_SPACING,
 36 |         NUM_HORIZONTAL_TICKS = AXIS_WIDTH / HORIZONTAL_TICK_SPACING,
 37 | 
 38 |         TICK_WIDTH = 10,
 39 |         TICKS_LINEWIDTH = 0.5,
 40 |         TICK_COLOR = 'navy',
 41 | 
 42 |         AXIS_LINEWIDTH = 1.0,
 43 |         AXIS_COLOR = 'blue';
 44 | 
 45 |     //Function……
 46 | 
 47 | 
 48 | 
 49 | 
 50 |     /**
 51 |      * 背景网格线
 52 |      * @param color
 53 |      * @param stepX
 54 |      * @param stepY
 55 |      */
 56 |     function drawGrid(color, stepX, stepY) {
 57 |         context.strokeStyle = color;
 58 |         context.lineWidth = 0.5;
 59 | 
 60 |         for (var i = stepX + 0.5; i < context.canvas.width; i += stepX) {
 61 |             context.beginPath();
 62 |             context.moveTo(i, 0);
 63 |             context.lineTo(i, context.canvas.height);
 64 |             context.stroke();
 65 |         }
 66 | 
 67 |         for (var i = stepY + 0.5; i < context.canvas.height; i += stepY) {
 68 |             context.beginPath();
 69 |             context.moveTo(0, i);
 70 |             context.lineTo(context.canvas.width, i);
 71 |             context.stroke();
 72 |         }
 73 |     }
 74 | 
 75 |     /**
 76 |      * 画坐标轴
 77 |      */
 78 |     function drawAxis() {
 79 |         context.save();
 80 |         context.strokeStyle = AXIS_COLOR;
 81 |         context.lineWidth = AXIS_LINEWIDTH;
 82 | 
 83 |         drawHorizontalAxis();
 84 |         drawVerticalAxis();
 85 | 
 86 |         context.lineWidth = TICKS_LINEWIDTH;
 87 |         context.strokeStyle = TICK_COLOR;
 88 | 
 89 |         drawVerticalAxisTicks();
 90 |         drawHorizontalAxisTicks();
 91 | 
 92 |         context.restore();
 93 |     }
 94 | 
 95 |     /**
 96 |      * 绘制x轴
 97 |      */
 98 |     function drawHorizontalAxis() {
 99 |         context.beginPath();
100 |         context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
101 |         context.lineTo(AXIS_RIGHT, AXIS_ORIGIN.y);
102 |         context.stroke();
103 |     }
104 | 
105 | 
106 |     /**
107 |      * 绘制y轴
108 |      */
109 |     function drawVerticalAxis() {
110 |         context.beginPath();
111 |         context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
112 |         context.lineTo(AXIS_ORIGIN.x, AXIS_TOP);
113 |         context.stroke();
114 |     }
115 | 
116 |     /**
117 |      * 绘制y轴刻度
118 |      */
119 |     function drawVerticalAxisTicks() {
120 |         //小刻度长度的临时变量
121 |         var deltaY;
122 | 
123 |         for (var i = 1; i < NUM_VERTICAL_TICKS; i++) {
124 |             context.beginPath();
125 |             //每5第五个刻度为长的小刻度
126 |             if (i % 5 === 0) deltaY = TICK_WIDTH;
127 |             else deltaY = TICK_WIDTH / 2;
128 | 
129 |             context.moveTo(AXIS_ORIGIN.x - deltaY, AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
130 |             context.lineTo(AXIS_ORIGIN.x + deltaY, AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
131 |             context.stroke();
132 | 
133 |         }
134 |     }
135 | 
136 |     /**
137 |      * 绘制x轴刻度
138 |      */
139 |     function drawHorizontalAxisTicks() {
140 |         //小刻度长度的临时变量
141 |         var deltaY;
142 | 
143 |         for (var i = 1; i < NUM_HORIZONTAL_TICKS; i++) {
144 |             context.beginPath();
145 |             //每5第五个刻度为长的小刻度
146 |             if (i % 5 === 0) deltaY = TICK_WIDTH;
147 |             else deltaY = TICK_WIDTH / 2;
148 | 
149 |             context.moveTo(AXIS_ORIGIN.x+i*HORIZONTAL_TICK_SPACING, AXIS_ORIGIN.y-deltaY);
150 |             context.lineTo(AXIS_ORIGIN.x+i*HORIZONTAL_TICK_SPACING, AXIS_ORIGIN.y+deltaY);
151 |             context.stroke();
152 | 
153 |         }
154 |     }
155 | 
156 |     //Initialization……
157 |     drawGrid('lightgray', 10, 10);
158 |     drawAxis();
159 |     context.translate(canvas.width,0);
160 |     context.scale(-1,1);
161 |     drawAxis();
162 | 
163 | 
164 | </script>
165 | </html>


--------------------------------------------------------------------------------
/Unit1/ClockReturnImage2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>Canvas时钟+转化img标签+不用按钮操作'</title>
  6 |     <style>
  7 |         body {
  8 |             background: #dddddd;
  9 |         }
 10 | 
 11 |         #canvas {
 12 |             display: none;
 13 |         }
 14 | 
 15 |         #snapshotImageElement {
 16 |             position: absolute;
 17 |             left: 10px;
 18 |             margin: 20px;
 19 |             border: thin solid #aaaaaa;
 20 |         }
 21 |     </style>
 22 | </head>
 23 | <body>
 24 |     <p>直接右键可以导出img变化的canvas</p>
 25 | 
 26 | 
 27 |     <img id='snapshotImageElement'/>
 28 | 
 29 |     <canvas id='canvas' width='400' height='400'>
 30 |         Canvas not supported
 31 |     </canvas>
 32 | </body>
 33 | <script>
 34 |     var canvas = document.getElementById('canvas'),
 35 |         context = canvas.getContext('2d'),
 36 |         //字体高度
 37 |         FONT_HEIGHT = 15,
 38 |         //外边距
 39 |         MARGIN = 35,
 40 |         //时钟半径（留出外边距放数字）
 41 |         RADIUS = canvas.width / 2 - MARGIN,
 42 |         //分针和秒针的截断长度
 43 |         HAND_TRUNCATION = canvas.width / 25,
 44 |         //时针截断长度
 45 |         HOUR_HAND_TRUNCATION = canvas.width / 10,
 46 |         //数字空隙
 47 |         NUMERAL_SPACING = 20,
 48 |         //指针的全长度
 49 |         HAND_RADUIS = RADIUS + NUMERAL_SPACING,
 50 | 
 51 |         snapshotImageElement = document.getElementById('snapshotImageElement'),
 52 |         loop;
 53 | 
 54 | 
 55 |     //方法……
 56 | 
 57 |     /**
 58 |      * 绘制一个钟面的圆形
 59 |      */
 60 |     function drawCircle() {
 61 |         //开始定义路径
 62 |         context.beginPath();
 63 |         //创建一个圆形路径
 64 |         context.arc(canvas.width / 2, canvas.height / 2, RADIUS, 0, Math.PI * 2, true);
 65 |         context.stroke();
 66 |     }
 67 | 
 68 |     /**
 69 |      * 绘制时钟周围的数字
 70 |      */
 71 |     function drawNumerals() {
 72 |         var numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
 73 |             angle = 0,
 74 |             numeralWidth = 0;
 75 | 
 76 |         numerals.forEach(function (numeral) {
 77 |             //设置每个数字的角度。注意：数字3是0度
 78 |             angle = Math.PI / 6 * (numeral - 3);
 79 |             //在向画布输出之前，以像素度量各数字的宽度
 80 |             numeralWidth = context.measureText(numeral).width;
 81 |             //利用三角函数，填充每个数字到对应位置
 82 |             context.fillText(numeral, canvas.width / 2 + Math.cos(angle) * (HAND_RADUIS) - numeralWidth / 2, canvas.height / 2 + Math.sin(angle) * (HAND_RADUIS) + FONT_HEIGHT / 3);
 83 |         })
 84 |     }
 85 | 
 86 |     /**
 87 |      * 绘制时钟中心的实心圆
 88 |      */
 89 |     function drawCenter() {
 90 |         context.beginPath();
 91 |         context.arc(canvas.width / 2, canvas.height / 2, 5, 0, Math.PI * 2, true);
 92 |         context.fill();
 93 |     }
 94 | 
 95 |     /**
 96 |      * 绘制某个钟表的指针的通用方法
 97 |      * @param loc
 98 |      * @param isHour
 99 |      */
100 |     function drawHand(loc, isHour) {
101 |         //设置指针角度
102 |         var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2,
103 |             //判断哪个指针
104 |             handRadius = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION : RADIUS - HAND_TRUNCATION;
105 | 
106 |         context.moveTo(canvas.width / 2, canvas.height / 2);
107 |         context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius, canvas.height / 2 + Math.sin(angle) * handRadius);
108 |         context.stroke();
109 |     }
110 | 
111 |     /**
112 |      * 以当前时间绘制钟表的三个表针，实现drawHand方法
113 |      */
114 |     function drawHands() {
115 |         var date = new Date,
116 |             hour = date.getHours();
117 |         //24小时制转化为12小时制
118 |         hour = hour > 12 ? hour - 12 : hour;
119 | 
120 |         //为了满足drawHand()中loc/60以平均角度的操作，需要将时针*5。因为12*5=60，可以当成分针/秒针进行调用函数
121 |         drawHand(hour * 5 + (date.getMinutes() / 60) * 5, true);
122 |         drawHand(date.getMinutes(), false);
123 |         drawHand(date.getSeconds(), false);
124 |     }
125 | 
126 |     /**
127 |      * 画出当前时刻钟表的各个组件
128 |      */
129 |     function drawClock() {
130 |         //清空全部canvas的像素内容
131 |         context.clearRect(0, 0, canvas.width, canvas.height);
132 | 
133 |         context.save();
134 |         context.fillStyle = 'rgba(255,255,255,0.8)';
135 |         context.fillRect(0, 0, canvas.width, canvas.height);
136 | 
137 |         drawCircle();
138 |         drawCenter();
139 |         drawHands();
140 | 
141 |         context.restore();
142 | 
143 |         drawNumerals();
144 | 
145 | 
146 |         updateClockImage();
147 |     }
148 | 
149 |     function updateClockImage() {
150 |         dataUrl = canvas.toDataURL();
151 |         snapshotImageElement.src = dataUrl;
152 |     }
153 | 
154 | 
155 | 
156 | 
157 | 
158 | 
159 |     //Initialization------初始化
160 |     context.font = FONT_HEIGHT + 'px Arial';
161 |     loop = setInterval(drawClock, 1000);
162 | 
163 | </script>
164 | </html>


--------------------------------------------------------------------------------
/Unit1/ClockReturnImage.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>Canvas时钟+转化img标签'</title>
  6 | </head>
  7 | <body>
  8 | <div id='controls'>
  9 |     <input id='snapshotButton' type='button' value='Take snapshot'/>
 10 |     <p>点击按钮，canvas和img的相互转化，通过右键查看不同效果</p>
 11 | </div>
 12 | 
 13 | <img id='snapshotImageElement'/>
 14 | <canvas id="canvas" height="400" width="400">Canvas不支持。</canvas>
 15 | </body>
 16 | <script>
 17 |     var canvas = document.getElementById('canvas'),
 18 |         context = canvas.getContext('2d'),
 19 |         //字体高度
 20 |         FONT_HEIGHT = 15,
 21 |         //外边距
 22 |         MARGIN = 35,
 23 |         //时钟半径（留出外边距放数字）
 24 |         RADIUS = canvas.width / 2 - MARGIN,
 25 |         //分针和秒针的截断长度
 26 |         HAND_TRUNCATION = canvas.width / 25,
 27 |         //时针截断长度
 28 |         HOUR_HAND_TRUNCATION = canvas.width / 10,
 29 |         //数字空隙
 30 |         NUMERAL_SPACING = 20,
 31 |         //指针的全长度
 32 |         HAND_RADUIS = RADIUS + NUMERAL_SPACING,
 33 | 
 34 |         snapshotButton = document.getElementById('snapshotButton'),
 35 |         snapshotImageElement = document.getElementById('snapshotImageElement'),
 36 |         loop;
 37 | 
 38 | 
 39 |     //方法……
 40 | 
 41 |     /**
 42 |      * 绘制一个钟面的圆形
 43 |      */
 44 |     function drawCircle() {
 45 |         //开始定义路径
 46 |         context.beginPath();
 47 |         //创建一个圆形路径
 48 |         context.arc(canvas.width / 2, canvas.height / 2, RADIUS, 0, Math.PI * 2, true);
 49 |         context.stroke();
 50 |     }
 51 | 
 52 |     /**
 53 |      * 绘制时钟周围的数字
 54 |      */
 55 |     function drawNumerals() {
 56 |         var numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
 57 |             angle = 0,
 58 |             numeralWidth = 0;
 59 | 
 60 |         numerals.forEach(function (numeral) {
 61 |             //设置每个数字的角度。注意：数字3是0度
 62 |             angle = Math.PI / 6 * (numeral - 3);
 63 |             //在向画布输出之前，以像素度量各数字的宽度
 64 |             numeralWidth = context.measureText(numeral).width;
 65 |             //利用三角函数，填充每个数字到对应位置
 66 |             context.fillText(numeral, canvas.width / 2 + Math.cos(angle) * (HAND_RADUIS) - numeralWidth / 2, canvas.height / 2 + Math.sin(angle) * (HAND_RADUIS) + FONT_HEIGHT / 3);
 67 |         })
 68 |     }
 69 | 
 70 |     /**
 71 |      * 绘制时钟中心的实心圆
 72 |      */
 73 |     function drawCenter() {
 74 |         context.beginPath();
 75 |         context.arc(canvas.width / 2, canvas.height / 2, 5, 0, Math.PI * 2, true);
 76 |         context.fill();
 77 |     }
 78 | 
 79 |     /**
 80 |      * 绘制某个钟表的指针的通用方法
 81 |      * @param loc
 82 |      * @param isHour
 83 |      */
 84 |     function drawHand(loc, isHour) {
 85 |         //设置指针角度
 86 |         var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2,
 87 |             //判断哪个指针
 88 |             handRadius = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION : RADIUS - HAND_TRUNCATION;
 89 | 
 90 |         context.moveTo(canvas.width / 2, canvas.height / 2);
 91 |         context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius, canvas.height / 2 + Math.sin(angle) * handRadius);
 92 |         context.stroke();
 93 |     }
 94 | 
 95 |     /**
 96 |      * 以当前时间绘制钟表的三个表针，实现drawHand方法
 97 |      */
 98 |     function drawHands() {
 99 |         var date = new Date,
100 |             hour = date.getHours();
101 |         //24小时制转化为12小时制
102 |         hour = hour > 12 ? hour - 12 : hour;
103 | 
104 |         //为了满足drawHand()中loc/60以平均角度的操作，需要将时针*5。因为12*5=60，可以当成分针/秒针进行调用函数
105 |         drawHand(hour * 5 + (date.getMinutes() / 60) * 5, true);
106 |         drawHand(date.getMinutes(), false);
107 |         drawHand(date.getSeconds(), false);
108 |     }
109 | 
110 |     /**
111 |      * 画出当前时刻钟表的各个组件
112 |      */
113 |     function drawClock() {
114 |         //清空全部canvas的像素内容
115 |         context.clearRect(0, 0, canvas.width, canvas.height);
116 | 
117 |         drawCircle();
118 |         drawCenter();
119 |         drawHands();
120 |         drawNumerals();
121 |     }
122 | 
123 | 
124 | 
125 |     snapshotButton.onclick = function (e) {
126 |         var dataUrl;
127 | 
128 |         if (snapshotButton.value === 'Take snapshot') {
129 |             dataUrl = canvas.toDataURL();
130 |             clearInterval(loop);
131 |             snapshotImageElement.src = dataUrl;
132 |             snapshotImageElement.style.display = 'inline';
133 |             canvas.style.display = 'none';
134 |             snapshotButton.value = 'Return to Canvas';
135 |         }
136 |         else {
137 |             snapshotButton.value = 'Take snapshot';
138 |             canvas.style.display = 'inline';
139 |             snapshotImageElement.style.display = 'none';
140 |             loop = setInterval(drawClock, 1000);
141 |         }
142 |     };
143 | 
144 | 
145 |     //Initialization------初始化
146 |     context.font = FONT_HEIGHT + 'px Arial';
147 |     loop = setInterval(drawClock, 1000);
148 | 
149 | </script>
150 | </html>


--------------------------------------------------------------------------------
/Unit1/BouncingBalls.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html>
  4 | <head>
  5 |     <title>Bouncing Balls运动小球</title>
  6 | 
  7 |     <meta charset="UTF-8">
  8 | 
  9 |     <style>
 10 |         body {
 11 |             background: #dddddd;
 12 |         }
 13 | 
 14 |         #canvas {
 15 |             margin-left: 10px;
 16 |             margin-top: 10px;
 17 |             background: #ffffff;
 18 |             border: thin solid #aaaaaa;
 19 |         }
 20 | 
 21 |         #glasspane {
 22 |             position: absolute;
 23 |             left: 50px;
 24 |             top: 50px;
 25 |             padding: 0px 20px 10px 10px;
 26 |             background: rgba(0, 0, 0, 0.3);
 27 |             border: thin solid rgba(0, 0, 0, 0.6);
 28 |             color: #eeeeee;
 29 |             font-family: Droid Sans, Arial, Helvetica, sans-serif;
 30 |             font-size: 12px;
 31 |             cursor: pointer;
 32 |             -webkit-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
 33 |             -moz-box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
 34 |             box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 20px;
 35 |         }
 36 | 
 37 |         #glasspane h2 {
 38 |             font-weight: normal;
 39 |         }
 40 | 
 41 |         #glasspane .title {
 42 |             font-size: 2em;
 43 |             color: rgba(255, 255, 0, 0.8);
 44 |         }
 45 | 
 46 |         #glasspane a:hover {
 47 |             color: yellow;
 48 |         }
 49 | 
 50 |         #glasspane a {
 51 |             text-decoration: none;
 52 |             color: #cccccc;
 53 |             font-size: 3.5em;
 54 |         }
 55 | 
 56 |         #glasspane p {
 57 |             margin: 10px;
 58 |             color: rgba(65, 65, 220, 1.0);
 59 |             font-size: 12pt;
 60 |             font-family: Palatino, Arial, Helvetica, sans-serif;
 61 |         }
 62 |     </style>
 63 | </head>
 64 | 
 65 | <body>
 66 | <!--玻璃窗格 glass pane-->
 67 | <div id='glasspane'>
 68 |     <h2 class='title'>弹射小球</h2>
 69 | 
 70 |     <p>一百个小球弹射</p>
 71 | 
 72 |     <a id='startButton'>Start</a>
 73 | </div>
 74 | 
 75 | <canvas id='canvas' width='750' height='500'>
 76 |     Canvas not supported
 77 | </canvas>
 78 | 
 79 | <script>
 80 |     var context = document.getElementById('canvas').getContext('2d'),
 81 |         startButton = document.getElementById('startButton'),
 82 |         glasspane = document.getElementById('glasspane'),
 83 |         paused = true,
 84 |         circles = [];
 85 | 
 86 |     drawGird(context, 'lightgray', 10, 10);
 87 | 
 88 |     context.lineWidth = 0.5;
 89 |     context.font = '32pt Ariel';
 90 | 
 91 |     //给100个小球设置不同的方向，半径，颜色
 92 |     for (var i = 0; i < 100; i++) {
 93 |         circles[i] = {
 94 |             x: 100,
 95 |             y: 100,
 96 |             //向x方向移动的像素
 97 |             velocityX: 3 * Math.random(),
 98 |             velocityY: 3 * Math.random(),
 99 |             radius: 50 * Math.random(),
100 |             color: 'rgba(' + (Math.random() * 255).toFixed(0) + ',' +
101 |                 (Math.random() * 255).toFixed(0) + ',' +
102 |                 (Math.random() * 255).toFixed(0) + ',1.0)'
103 |         };
104 |     }
105 | 
106 |     startButton.onclick = function (ev) {
107 |         //取消默认行为
108 |         ev.preventDefault();
109 |         //阻止冒泡
110 |         ev.stopPropagation();
111 |         paused = !paused;
112 |         startButton.innerText = paused ? '启动' : '暂停';
113 |     };
114 | 
115 |     glasspane.onmousedown = function (ev) {
116 |         ev.preventDefault();
117 |         ev.stopPropagation();
118 |     };
119 | 
120 |     context.canvas.onmousedown = function (ev) {
121 |         ev.preventDefault();
122 |         ev.stopPropagation();
123 |     };
124 | 
125 |     setInterval(function () {
126 |         if (!paused) {
127 |             context.clearRect(0, 0, context.canvas.width, context.canvas.height);
128 |             drawGird(context, 'lightgray', 10, 10);
129 | 
130 |             circles.forEach(function (circle) {
131 |                 context.beginPath();
132 |                 context.arc(circle.x, circle.y, circle.radius,
133 |                     0, Math.PI * 2, false);
134 |                 context.fillStyle = circle.color;
135 |                 context.fill();
136 |                 adjustPosition(circle);
137 | 
138 | 
139 |             });
140 |         }
141 |     }, 1000 / 60);
142 | 
143 |     /**
144 |      * 调整每个球的位置,如果触碰到边缘，就调整方向
145 |      * @param circle
146 |      */
147 |     function adjustPosition(circle) {
148 |         if (circle.x + circle.velocityX + circle.radius > context.canvas.width || circle.x - circle.radius + circle.velocityX<0)
149 |             circle.velocityX = -circle.velocityX;
150 | 
151 |         if (circle.y + circle.velocityY + circle.radius > context.canvas.height || circle.y - circle.radius + circle.velocityY<0)
152 |             circle.velocityY = -circle.velocityY;
153 | 
154 |         circle.x += circle.velocityX;
155 |         circle.y += circle.velocityY;
156 |     }
157 | 
158 |     /**
159 |      * 画网格线
160 |      * @param context
161 |      * @param color
162 |      * @param stepX X方向网格间距
163 |      * @param stepY Y方向网格间距
164 |      */
165 |     function drawGird(context,color,stepX,stepY) {
166 |         context.strokeStyle = color;
167 |         context.lineWidth = 0.5;
168 | 
169 |         for (var i = stepX+0.5;i<context.canvas.width;i+=stepX){
170 |             context.beginPath();
171 |             context.moveTo(i,0);
172 |             context.lineTo(i, context.canvas.height);
173 |             context.stroke();
174 |         }
175 | 
176 |         for (var i = stepY + 0.5; i < context.canvas.height; i+=stepY) {
177 |             context.beginPath();
178 |             context.moveTo(0, i);
179 |             context.lineTo(context.canvas.width, i);
180 |             context.stroke();
181 |         }
182 |     }
183 | </script>
184 | </body>
185 | </html>
186 | 


--------------------------------------------------------------------------------
/Unit1/RubberBands.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>橡皮筋选框放大器</title>
  6 |     <style>
  7 |         body {
  8 |             background: rgba(100, 145, 250, 0.3);
  9 |         }
 10 | 
 11 |         #canvas {
 12 |             margin-left: 20px;
 13 |             margin-right: 0;
 14 |             margin-bottom: 20px;
 15 |             border: thin solid #aaaaaa;
 16 |             /*十字瞄准线*/
 17 |             cursor: crosshair;
 18 |             padding: 0;
 19 |         }
 20 | 
 21 |         #controls {
 22 |             margin: 20px 0px 20px 20px;
 23 |         }
 24 | 
 25 |         #rubberbandDiv {
 26 |             /*绝对定位，方便位置选取*/
 27 |             position: absolute;
 28 |             border: 3px solid yellow;
 29 |             cursor: crosshair;
 30 |             display: none;
 31 |         }
 32 |     </style>
 33 | </head>
 34 | <body>
 35 | <!--控制重置画面的按钮-->
 36 | <div id="controls">
 37 |     <input type="button" id="resetButton" value="Reset">
 38 | </div>
 39 | <!--橡皮筋选取狂div-->
 40 | <div id="rubberbandDiv"></div>
 41 | <canvas id="canvas" width="800" height="520">Canvas not supported</canvas>
 42 | <p>拖拽鼠标拉取橡皮筋，选中区域并放大</p>
 43 | </body>
 44 | <script>
 45 |     var canvas = document.getElementById('canvas'),
 46 |         context = canvas.getContext('2d'),
 47 |         rubberbandDiv = document.getElementById('rubberbandDiv'),
 48 |         resetButton = document.getElementById('resetButton'),
 49 |         image = new Image(),
 50 |         //鼠标按下时刻的对象
 51 |         mousedown = {},
 52 |         //橡皮筋矩形对象
 53 |         rubberbandRectangle = {},
 54 |         dragging = false;
 55 | 
 56 |     //Functions……
 57 | 
 58 |     /**
 59 |      * 将#rubberbandDiv的左上角移动到鼠标按下的位置
 60 |      * @param x
 61 |      * @param y
 62 |      */
 63 |     function rubberbandStart(x, y) {
 64 |         mousedown.x = x;
 65 |         mousedown.y = y;
 66 | 
 67 |         rubberbandRectangle.left = mousedown.x;
 68 |         rubberbandRectangle.top = mousedown.y;
 69 | 
 70 |         moveRubberbandDiv();
 71 |         showRubberbandDiv();
 72 | 
 73 |         dragging = true;
 74 |     }
 75 | 
 76 |     /**
 77 |      * 对橡皮筋选取框进行移动和缩放
 78 |      * @param x
 79 |      * @param y
 80 |      */
 81 |     function rubberbandStretch(x, y) {
 82 |         //「左上」「右下」「左下」「右上」的各种两两组合的拉伸方式
 83 |         rubberbandRectangle.left = x < mousedown.x ? x : mousedown.x;
 84 |         rubberbandRectangle.top = y < mousedown.y ? y : mousedown.y;
 85 | 
 86 |         rubberbandRectangle.width = Math.abs(x - mousedown.x);
 87 |         rubberbandRectangle.height = Math.abs(y - mousedown.y);
 88 | 
 89 |         moveRubberbandDiv();
 90 |         resizeRubberbandDiv();
 91 |     };
 92 | 
 93 |     /**
 94 |      * 将选中的区域放大并绘制，并将橡皮筋div隐藏
 95 |      */
 96 |     function rubberbandEnd() {
 97 |         //返回涵盖元素的大小以及窗口位置的对象
 98 |         var bbox = canvas.getBoundingClientRect();
 99 | 
100 |         try {
101 |             //选区放大
102 |             context.drawImage(
103 |                 canvas,
104 |                 rubberbandRectangle.left - bbox.left,
105 |                 rubberbandRectangle.top - bbox.top,
106 |                 rubberbandRectangle.width,
107 |                 rubberbandRectangle.height,
108 |                 0, 0, canvas.width, canvas.height
109 |             );
110 |         } catch (e) {
111 |             // suppress error message when mouse is released
112 |             // outside the canvas
113 |             alert('鼠标释放错误警报！');
114 |         }
115 | 
116 |         resetRubberbandRectangle();
117 | 
118 |         rubberbandDiv.style.width = 0;
119 |         rubberbandDiv.style.height = 0;
120 | 
121 |         hideRubberbandDiv();
122 | 
123 |         dragging = false;
124 | 
125 |     }
126 | 
127 | 
128 |     /**
129 |      * 让橡皮筋选狂的属性和橡皮筋矩形对象的位置保持一致
130 |      */
131 |     function moveRubberbandDiv() {
132 |         rubberbandDiv.style.top = rubberbandRectangle.top + 'px';
133 |         rubberbandDiv.style.left = rubberbandRectangle.left + 'px';
134 |     }
135 | 
136 |     /**
137 |      * 调整橡皮筋div的宽高
138 |      */
139 |     function resizeRubberbandDiv() {
140 |         rubberbandDiv.style.width = rubberbandRectangle.width + 'px';
141 |         rubberbandDiv.style.height = rubberbandRectangle.height + 'px';
142 |     }
143 | 
144 |     /**
145 |      * 通过display显示橡皮筋
146 |      */
147 |     function showRubberbandDiv() {
148 |         rubberbandDiv.style.display = 'inline';
149 |     }
150 | 
151 |     /**
152 |      * 通过display隐藏橡皮筋
153 |      */
154 |     function hideRubberbandDiv() {
155 |         rubberbandDiv.style.display = 'none';
156 |     }
157 | 
158 |     /**
159 |      * 重置初始化橡皮筋矩形对象
160 |      */
161 |     function resetRubberbandRectangle() {
162 |         rubberbandRectangle = {top: 0, left: 0, width: 0, height: 0};
163 |     }
164 | 
165 |     //Event handlers……
166 | 
167 |     canvas.onmousedown = function (ev) {
168 |         var x = ev.x || ev.clientX,
169 |             y = ev.y || ev.clientY;
170 | 
171 |         ev.preventDefault();
172 |         rubberbandStart(x, y);
173 |     };
174 | 
175 |     window.onmousemove = function (ev) {
176 |         var x = ev.x || ev.clientX,
177 |             y = ev.y || ev.clientY;
178 | 
179 |         ev.preventDefault();
180 |         if (dragging) {
181 |             rubberbandStretch(x, y);
182 |         }
183 |     };
184 | 
185 |     window.onmouseup = function (ev) {
186 |         ev.preventDefault();
187 |         rubberbandEnd();
188 |     };
189 | 
190 |     image.onload = function (ev) {
191 |         context.drawImage(image, 0, 0, canvas.width, canvas.height);
192 |     };
193 | 
194 |     resetButton.onclick=function (ev) {
195 |         context.clearRect(0,0,context.canvas.width,context.canvas.height);
196 |         context.drawImage(image,0,0,canvas.width,canvas.height);
197 |     };
198 | 
199 |     //Initialization……
200 | 
201 |     image.src='../images/arch.png';
202 | </script>
203 | </html>


--------------------------------------------------------------------------------
/Unit3/CircleText.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--
  3 |     Author:苏一恒
  4 |     Date:2019/10/24 10:53
  5 |     Motto:
  6 |         The best time to plant trees is ten years ago, followed by now. 
  7 |         种树最好的时间是十年前，其次是现在。
  8 |  -->
  9 | <html lang="zh-CN">
 10 | <head>
 11 |     <meta charset="UTF-8">
 12 |     <title>环形文字(1024节日快乐)</title>
 13 |     <style>
 14 |         body {
 15 |             background: #eeeeee;
 16 |             padding: 0;
 17 |             margin: 0;
 18 |         }
 19 | 
 20 |         #canvas {
 21 |             background: #ffffff;
 22 | 
 23 |             -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
 24 |             -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
 25 |             box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
 26 |             border: 1px solid rgba(0, 0, 0, 0.2);
 27 |         }
 28 |     </style>
 29 | </head>
 30 | <body>
 31 | <canvas id='canvas' width="650px" height="450px" style="width: 100%;height: 100%;">canvas not supports</canvas>
 32 | 
 33 | <script>
 34 |     'use strict';
 35 | 
 36 |     let canvas = document.getElementById('canvas'),
 37 |         context = canvas.getContext('2d'),
 38 |         //圆心半径
 39 |         CENTROID_RADIUS = 10,
 40 |         CENTROID_STROKE_STYLE = 'rgba(0, 0, 0, 0.5)',
 41 |         CENTROID_FILL_STYLE = 'rgba(80, 190, 240, 0.6)',
 42 | 
 43 |         GUIDEWIRE_STROKE_STYLE = 'goldenrod',
 44 |         GUIDEWIRE_FILL_STYLE = 'rgba(85, 190, 240, 0.6)',
 45 | 
 46 |         TEXT_FILL_STYLE = 'rgba(100, 130, 240, 0.5)',
 47 |         TEXT_STROKE_STYLE = 'rgba(200, 0, 0, 0.7)',
 48 |         TEXT_SIZE = 64,
 49 | 
 50 |         circle = {
 51 |             x: canvas.width / 2,
 52 |             y: canvas.height / 2,
 53 |             radius: 180
 54 |         },
 55 | 
 56 |         startAngle = Math.PI*2+Math.PI/2,
 57 |         endAngle = Math.PI/8+Math.PI/2,
 58 |         text = '祝各位工程师1024节日快乐。';
 59 | 
 60 |     //Function……
 61 |     /**
 62 |      * 画网格线
 63 |      * @param color
 64 |      * @param stepx
 65 |      * @param stepy
 66 |      */
 67 |     let drawGrid = (color, stepx, stepy) => {
 68 |         context.save()
 69 | 
 70 |         context.shadowColor = undefined;
 71 |         context.shadowOffsetX = 0;
 72 |         context.shadowOffsetY = 0;
 73 | 
 74 |         context.strokeStyle = color;
 75 |         context.fillStyle = '#ffffff';
 76 |         context.lineWidth = 0.5;
 77 |         context.fillRect(0, 0, context.canvas.width, context.canvas.height);
 78 | 
 79 |         for (let i = stepx + 0.5; i < context.canvas.width; i += stepx) {
 80 |             context.beginPath();
 81 |             context.moveTo(i, 0);
 82 |             context.lineTo(i, context.canvas.height);
 83 |             context.stroke();
 84 |         }
 85 | 
 86 |         for (let i = stepy + 0.5; i < context.canvas.height; i += stepy) {
 87 |             context.beginPath();
 88 |             context.moveTo(0, i);
 89 |             context.lineTo(context.canvas.width, i);
 90 |             context.stroke();
 91 |         }
 92 | 
 93 |         context.restore();
 94 |     };
 95 | 
 96 |     /**
 97 |      * 画圆心
 98 |      */
 99 |     let drawCentroid = () => {
100 |         context.beginPath();
101 |         context.save();
102 |         context.strokeStyle = CENTROID_STROKE_STYLE;
103 |         context.fillStyle = CENTROID_FILL_STYLE;
104 |         context.textBaseline="middle";
105 |         context.textAlign="center";
106 |         context.font='30px Lucida Sans';
107 |         context.fillText('By 苏一恒',circle.x, circle.y);
108 |         // context.arc(circle.x, circle.y, CENTROID_RADIUS, 0, Math.PI * 2, false);
109 |         context.stroke();
110 |         context.fill();
111 |         context.restore();
112 |     };
113 | 
114 |     /**
115 |      * 绘制环形文字
116 |      * @param{string} string 传入的文字
117 |      * @param startAngle 起始角
118 |      * @param endAngle 末尾角
119 |      */
120 |     let drawCircularText = (string, startAngle, endAngle) => {
121 |         let radius = circle.radius,
122 |             angleDecrement = (startAngle - endAngle) / (string.length - 1),
123 |             angle = parseFloat(startAngle),
124 |             index = 0,
125 |             character;
126 | 
127 |         context.save();
128 |         context.fillStyle=TEXT_FILL_STYLE;
129 |         context.strokeStyle=TEXT_STROKE_STYLE;
130 |         context.font=TEXT_SIZE+'px Lucida Sans';
131 | 
132 |         while(index < string.length){
133 |             //获取传入的字符串的每个字符
134 |             character = string.charAt(index);
135 | 
136 |             context.save();
137 |             context.beginPath();
138 |             //位移到每个字符的指定位置
139 |             context.translate(circle.x+Math.cos(angle)*radius,circle.y - Math.sin(angle)*radius);
140 | 
141 |             //旋转坐标系到每个字符应该达到到角度
142 |             context.rotate(Math.PI/2-angle);
143 |             context.fillText(character,0,0);
144 |             context.strokeText(character,0,0);
145 | 
146 |             //角度递减
147 |             angle -= angleDecrement;
148 | 
149 |             index++;
150 | 
151 |             context.restore();
152 |         }
153 |     };
154 | 
155 | 
156 |     //Init
157 |     let init=(startAngle,endAngle)=>{
158 |         context.shadowOffsetX=15;
159 |         context.shadowOffsetY=15;
160 |         context.shadowBlur=8;
161 |         context.shadowColor='rgba(0,0,0,0.4)';
162 | 
163 |         context.textAlign='center';
164 |         context.textBaseline='middle';
165 | 
166 |         drawGrid('lightgray',10,10);
167 |         drawCentroid();
168 |         drawCircularText(text,startAngle,endAngle);
169 |     };
170 |     init(startAngle,endAngle);
171 | 
172 |     setInterval(()=> {
173 |         context.clearRect(canvas.width,canvas.height,0,0);
174 |         init(startAngle+=Math.PI/250,endAngle+=Math.PI/250);
175 |     },1000/24);//24帧
176 | 
177 |     console.log('好吧，这里是一个彩蛋。');
178 |     console.log('虽说ITer是擅长自黑的团体，但是呢，如果我们将"程序员"的称呼变成"工程师"，那对于我们来说，在孩子面前是不是就有了更高的威望呢？');
179 | 
180 | </script>
181 | </body>
182 | </html>


--------------------------------------------------------------------------------
/Unit3/AxisWithText.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--
  3 |     Author:苏一恒
  4 |     Date:2019/10/23 09:08
  5 |     Motto:
  6 |         The best time to plant trees is ten years ago, followed by now. 
  7 |         种树最好的时间是十年前，其次是现在。
  8 |  -->
  9 | <html lang="en">
 10 | <head>
 11 |     <meta charset="UTF-8">
 12 |     <title>带数字标签的坐标轴的绘制</title>
 13 | </head>
 14 | <body>
 15 | <canvas id="canvas" width="400" height="300"></canvas>
 16 | </body>
 17 | <script>
 18 |     let canvas = document.getElementById('canvas'),
 19 |         context = canvas.getContext('2d'),
 20 | 
 21 |         //外边距
 22 |         AXIS_MARGIN = 40,
 23 |         //原点，将之设置到画布左下区域
 24 |         AXIS_ORIGIN = {x: AXIS_MARGIN, y: canvas.height - AXIS_MARGIN},
 25 | 
 26 |         //y轴顶点位置
 27 |         AXIS_TOP = AXIS_MARGIN,
 28 |         //x轴顶点位置
 29 |         AXIS_RIGHT = canvas.width - AXIS_MARGIN,
 30 | 
 31 |         //横向刻度线间距
 32 |         HORIZONTAL_TICK_SPACING = 10,
 33 |         //垂直刻度线间距
 34 |         VERTICAL_TICK_SPACING = 10,
 35 | 
 36 |         //X轴长度
 37 |         AXIS_WIDTH = AXIS_RIGHT - AXIS_ORIGIN.x,
 38 |         //y轴长度
 39 |         AXIS_HEIGHT = AXIS_ORIGIN.y - AXIS_TOP,
 40 | 
 41 |         //y轴上的点的最大值
 42 |         NUM_VERTICAL_TICKS = AXIS_HEIGHT / VERTICAL_TICK_SPACING,
 43 |         NUM_HORIZONTAL_TICKS = AXIS_WIDTH / HORIZONTAL_TICK_SPACING,
 44 | 
 45 |         TICK_WIDTH = 10,
 46 |         TICKS_LINEWIDTH = 0.5,
 47 |         TICK_COLOR = 'navy',
 48 | 
 49 |         AXIS_LINEWIDTH = 1.0,
 50 |         AXIS_COLOR = 'blue';
 51 | 
 52 |         //数字与坐标轴的距离
 53 |         SPACE_BETWEEN_LABELS_AND_AXIS =  15;
 54 | 
 55 | 
 56 |     //Function……
 57 | 
 58 |     /**
 59 |      * 背景网格线
 60 |      * @param color
 61 |      * @param stepX
 62 |      * @param stepY
 63 |      */
 64 |     let drawGrid=(color, stepX, stepY)=> {
 65 |         context.strokeStyle = color;
 66 |         context.lineWidth = 0.5;
 67 | 
 68 |         for (let i = stepX + 0.5; i < context.canvas.width; i += stepX) {
 69 |             context.beginPath();
 70 |             context.moveTo(i, 0);
 71 |             context.lineTo(i, context.canvas.height);
 72 |             context.stroke();
 73 |         }
 74 | 
 75 |         for (let i = stepY + 0.5; i < context.canvas.height; i += stepY) {
 76 |             context.beginPath();
 77 |             context.moveTo(0, i);
 78 |             context.lineTo(context.canvas.width, i);
 79 |             context.stroke();
 80 |         }
 81 |     };
 82 | 
 83 |     /**
 84 |      * 画坐标轴
 85 |      */
 86 |     let drawAxis=() =>{
 87 |         context.save();
 88 |         context.strokeStyle = AXIS_COLOR;
 89 |         context.lineWidth = AXIS_LINEWIDTH;
 90 | 
 91 |         drawHorizontalAxis();
 92 |         drawVerticalAxis();
 93 | 
 94 |         context.lineWidth = TICKS_LINEWIDTH;
 95 |         context.strokeStyle = TICK_COLOR;
 96 | 
 97 |         drawVerticalAxisTicks();
 98 |         drawHorizontalAxisTicks();
 99 | 
100 |         context.restore();
101 |     };
102 | 
103 |     /**
104 |      * 绘制x轴
105 |      */
106 |     let drawHorizontalAxis=()=> {
107 |         context.beginPath();
108 |         context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
109 |         context.lineTo(AXIS_RIGHT, AXIS_ORIGIN.y);
110 |         context.stroke();
111 |     };
112 | 
113 | 
114 |     /**
115 |      * 绘制y轴
116 |      */
117 |     let drawVerticalAxis=()=> {
118 |         context.beginPath();
119 |         context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
120 |         context.lineTo(AXIS_ORIGIN.x, AXIS_TOP);
121 |         context.stroke();
122 |     };
123 | 
124 |     /**
125 |      * 绘制y轴刻度
126 |      */
127 |     let drawVerticalAxisTicks=()=> {
128 |         //小刻度长度的临时变量
129 |         let deltaY;
130 | 
131 |         for (let i = 1; i < NUM_VERTICAL_TICKS; i++) {
132 |             context.beginPath();
133 |             //每5第五个刻度为长的小刻度
134 |             deltaY = i % 5 === 0 ? TICK_WIDTH : TICK_WIDTH / 2;
135 |             context.moveTo(AXIS_ORIGIN.x - deltaY, AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
136 |             context.lineTo(AXIS_ORIGIN.x + deltaY, AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
137 |             context.stroke();
138 | 
139 |         }
140 |     };
141 | 
142 |     /**
143 |      * 绘制x轴刻度
144 |      */
145 |     let drawHorizontalAxisTicks=()=> {
146 |         //小刻度长度的临时变量
147 |         let deltaY;
148 | 
149 |         for (let i = 1; i < NUM_HORIZONTAL_TICKS; i++) {
150 |             context.beginPath();
151 |             //每5第五个刻度为长的小刻度
152 |             deltaY = i % 5 === 0 ? TICK_WIDTH : TICK_WIDTH / 2;
153 | 
154 |             context.moveTo(AXIS_ORIGIN.x+i*HORIZONTAL_TICK_SPACING, AXIS_ORIGIN.y-deltaY);
155 |             context.lineTo(AXIS_ORIGIN.x+i*HORIZONTAL_TICK_SPACING, AXIS_ORIGIN.y+deltaY);
156 |             context.stroke();
157 | 
158 |         }
159 |     };
160 | 
161 |     /**
162 |      * 添加坐标轴数字标签
163 |      */
164 |     let drawAxisLabels=()=> {
165 |         context.fillStyle = 'blue';
166 |         drawHorizontalAxisLabels();
167 |         drawVerticalAxisLabels();
168 |     };
169 | 
170 |     /**
171 |      * 添加横坐标数字标签
172 |      */
173 |     let drawHorizontalAxisLabels=()=> {
174 |         context.textAlign = 'center';
175 |         context.textBaseline = 'top';
176 | 
177 |         for (let i=0; i <= NUM_HORIZONTAL_TICKS; ++i) {
178 |             if (i % 5 === 0) {
179 |                 context.fillText(i,
180 |                     AXIS_ORIGIN.x + i * HORIZONTAL_TICK_SPACING,
181 |                     AXIS_ORIGIN.y + SPACE_BETWEEN_LABELS_AND_AXIS);
182 |             }
183 |         }
184 |     };
185 | 
186 |     /**
187 |      * 添加垂直坐标数字标签
188 |      */
189 |     let drawVerticalAxisLabels=()=> {
190 |         context.textAlign = 'right';
191 |         context.textBaseline = 'middle';
192 | 
193 |         for (let i=0; i <= NUM_VERTICAL_TICKS; ++i) {
194 |             if (i % 5 === 0) {
195 |                 context.fillText(i,
196 |                     AXIS_ORIGIN.x - SPACE_BETWEEN_LABELS_AND_AXIS,
197 |                     AXIS_ORIGIN.y - i * VERTICAL_TICK_SPACING);
198 |             }
199 |         }
200 |     };
201 |     //Initialization……
202 |     drawGrid('lightgray', 10, 10);
203 |     drawAxis();
204 |     drawAxisLabels();
205 | 
206 | 
207 | </script>
208 | </html>


--------------------------------------------------------------------------------
/Unit2/DragCircle.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>拖拽画圆</title>
  6 | </head>
  7 | <style>
  8 |     body {
  9 |         background: #eeeeee;
 10 |     }
 11 | 
 12 |     #controls {
 13 |         position: absolute;
 14 |         left: 25px;
 15 |         top: 25px;
 16 |     }
 17 | 
 18 |     #canvas {
 19 |         background: #ffffff;
 20 |         cursor: pointer;
 21 |         margin-left: 10px;
 22 |         margin-top: 10px;
 23 |         box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
 24 |     }
 25 | 
 26 |     input[type='button'] {
 27 |         background: cornflowerblue;
 28 |         cursor: pointer;
 29 |         border-radius: 10px;
 30 |     }
 31 | </style>
 32 | <body>
 33 | 
 34 | <canvas id="canvas" width="600" height="400"></canvas>
 35 | 
 36 | <div id="controls">
 37 | 
 38 |     Color:<select id="strokeStyleSelect" style="margin-right: 20px">
 39 |     <option value="red">red</option>
 40 |     <option value="green">green</option>
 41 |     <option value="blue">blue</option>
 42 |     <option value="orange">orange</option>
 43 | 
 44 | </select>
 45 |     Guidewires(坐标辅助线):
 46 |     <input type="checkbox" id="guidewireCheckbox" checked style="margin-right: 20px">
 47 |     填充实心
 48 |     <input type="checkbox" id="RectangleCheckbox" style="margin-right: 20px">
 49 |     <input type="button" id="eraseAllButton" value="清空画布">
 50 | </div>
 51 | <p>画圆：设置笔触颜色，是否添加辅助线，是否填充内部空间，然后再画布上绘画。如有需要，使用"清除画布"按钮</p>
 52 | </body>
 53 | <script>
 54 |     var canvas = document.getElementById('canvas'),
 55 |         context = canvas.getContext('2d'),
 56 |         eraseAllButton = document.getElementById('eraseAllButton'),
 57 |         guidewireCheckbox = document.getElementById('guidewireCheckbox'),
 58 |         strokeStyleSelect = document.getElementById('strokeStyleSelect'),
 59 |         RectangleCheckbox = document.getElementById('RectangleCheckbox'),
 60 |         drawingSurfaceImageData,
 61 |         mousedown = {},
 62 |         rubberbandRect = {},
 63 |         dragging = false,
 64 |         guidewires = guidewireCheckbox.checked,
 65 |         rectangle = RectangleCheckbox.checked;
 66 | 
 67 |     //Function……
 68 | 
 69 |     /**
 70 |      * 画网格
 71 |      * @param color
 72 |      * @param stepX
 73 |      * @param stepY
 74 |      */
 75 |     function drawGrid(color, stepX, stepY) {
 76 |         context.save();
 77 |         context.lineWidth = 0.5;
 78 |         context.strokeStyle = color;
 79 | 
 80 |         for (var i = stepX + 0.5; i < canvas.width; i += stepX) {
 81 |             context.beginPath();
 82 |             context.moveTo(i, 0 + 0.5);
 83 |             context.lineTo(i, canvas.height + 0.5)
 84 |             context.stroke();
 85 |         }
 86 | 
 87 |         for (var i = stepY + 0.5; i < canvas.height; i += stepY) {
 88 |             context.beginPath();
 89 |             context.moveTo(0 + 0.5, i);
 90 |             context.lineTo(canvas.width, i);
 91 |             context.stroke();
 92 |         }
 93 |         context.restore();
 94 |     }
 95 | 
 96 |     /**
 97 |      * 坐标转化为canvas坐标
 98 |      * @param x
 99 |      * @param y
100 |      */
101 |     function windowToCanvas(x, y) {
102 |         //返回元素的大小以及位置
103 |         var bbox = canvas.getBoundingClientRect();
104 |         return {x: x - bbox.left * (canvas.width / bbox.width), y: y - bbox.top * (canvas.height / bbox.height)};
105 | 
106 |     }
107 | 
108 |     //保存和恢复绘图面板
109 | 
110 |     function saveDrawingSurface() {
111 |         drawingSurfaceImageData = context.getImageData(0, 0, canvas.width, canvas.height);
112 |     }
113 | 
114 |     function restoreDrawingSurface() {
115 |         context.putImageData(drawingSurfaceImageData, 0, 0);
116 |     }
117 | 
118 |     //Rubber bands
119 | 
120 |     /**
121 |      * 更新橡皮筋圆形
122 |      * @param loc
123 |      */
124 |     function updateRubberbandCircle(loc) {
125 |         rubberbandRect.width = Math.abs(loc.x - mousedown.x);
126 |         rubberbandRect.height = Math.abs(loc.y - mousedown.y);
127 |         var angle, radius;
128 | 
129 |         if (mousedown.y === loc.y) {
130 |             radius = Math.abs(loc.x - mousedown.x);
131 |             console.log(radius);
132 |         } else {
133 |             //反正切函数
134 |             console.log(rubberbandRect.height + '+' + rubberbandRect.width);
135 |             radius = Math.sqrt(Math.pow(rubberbandRect.height, 2) + Math.pow(rubberbandRect.width, 2));
136 |         }
137 | 
138 |         context.beginPath();
139 |         context.arc(mousedown.x, mousedown.y, radius, 0, Math.PI * 2, false);
140 |         context.stroke();
141 | 
142 |         if (rectangle) {
143 |             context.fillStyle=strokeStyleSelect.value;
144 |             context.fill();
145 |         }
146 |     }
147 | 
148 | 
149 | 
150 |     /**
151 |      * 更新橡皮筋
152 |      * @param loc
153 |      */
154 |     function updateRubberband(loc) {
155 | 
156 |         updateRubberbandCircle(loc);
157 | 
158 | 
159 |     }
160 | 
161 |     //Guidewires辅助线
162 | 
163 |     /**
164 |      * 画水平辅助线，占整个宽canvas度
165 |      * @param y
166 |      */
167 |     function drawHorizontalLine(y) {
168 |         context.beginPath();
169 |         context.moveTo(0, y + 0.5);
170 |         context.lineTo(canvas.width, y + 0.5);
171 |         context.stroke();
172 |     }
173 | 
174 |     /**
175 |      * 画垂直辅助线，占整个canvas高度
176 |      * @param x
177 |      */
178 |     function drawVerticalLine(x) {
179 |         context.beginPath();
180 |         context.moveTo(x + 0.5, 0);
181 |         context.lineTo(x + 0.5, context.canvas.height);
182 |         context.stroke();
183 |     }
184 | 
185 |     /**
186 |      * 画辅助线，并设置属性
187 |      * @param x
188 |      * @param y
189 |      */
190 |     function drawGuidewires(x, y) {
191 |         context.save();
192 |         context.strokeStyle = 'rgba(0,0,230,0.4)';
193 |         context.lineWidth = 0.5;
194 |         drawVerticalLine(x);
195 |         drawHorizontalLine(y);
196 |         context.restore();
197 |     }
198 | 
199 |     //事件
200 | 
201 |     /**
202 |      * 鼠标按下的时候，记录坐标，并设置为拖拽状态
203 |      * @param e
204 |      */
205 |     canvas.onmousedown = function (e) {
206 |         var loc = windowToCanvas(e.clientX, e.clientY);
207 | 
208 |         e.preventDefault();
209 |         saveDrawingSurface();
210 |         mousedown.x = loc.x;
211 |         mousedown.y = loc.y;
212 |         dragging = true;
213 |     }
214 | 
215 |     /**
216 |      * （鼠标按下之后）鼠标移动的时候
217 |      * 判断拖拽中：更新当前连线的位置
218 |      * 判断辅助线显示：添加辅助线
219 |      * @param e
220 |      */
221 |     canvas.onmousemove = function (e) {
222 | 
223 |         var loc;
224 |         if (dragging) {
225 | 
226 |             e.preventDefault();
227 | 
228 |             loc = windowToCanvas(e.clientX, e.clientY);
229 |             restoreDrawingSurface();
230 | 
231 |             updateRubberband(loc);
232 | 
233 | 
234 |             if (guidewires) {
235 |                 drawGuidewires(loc.x, loc.y);
236 |             }
237 |         }
238 | 
239 |     }
240 | 
241 |     /**
242 |      * (拖拽完成后)当鼠标松开时，重新获取本点坐标，清除之前的"跟随鼠标移动的线"，更新连线，取消拖拽状态
243 |      * @param e
244 |      */
245 |     canvas.onmouseup = function (e) {
246 |         loc = windowToCanvas(e.clientX, e.clientY);
247 |         restoreDrawingSurface();
248 |         updateRubberband(loc);
249 |         dragging = false;
250 |     };
251 | 
252 |     //控制器的事件
253 | 
254 |     /**
255 |      * 清除所有画布图像
256 |      * @param ev
257 |      */
258 |     eraseAllButton.onclick = function (ev) {
259 |         context.clearRect(0, 0, canvas.width, canvas.height);
260 |         drawGrid('lightgray', 10, 10);
261 |         saveDrawingSurface();
262 |     };
263 | 
264 |     strokeStyleSelect.onchange = function (ev) {
265 |         context.strokeStyle = strokeStyleSelect.value;
266 |     };
267 | 
268 |     guidewireCheckbox.onchange = function (ev) {
269 |         guidewires = guidewireCheckbox.checked;
270 |     };
271 | 
272 |     RectangleCheckbox.onchange = function (ev) {
273 |         rectangle = RectangleCheckbox.checked;
274 |     };
275 | 
276 |     //init
277 | 
278 |     context.strokeStyle = strokeStyleSelect.value;
279 |     drawGrid('lightgray', 10, 10);
280 | 
281 | </script>
282 | </html>


--------------------------------------------------------------------------------
/Unit2/DragLine.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>拖拽画直线</title>
  6 | </head>
  7 | <style>
  8 |     body {
  9 |         background: #eeeeee;
 10 |     }
 11 | 
 12 |     #controls {
 13 |         position: absolute;
 14 |         left: 25px;
 15 |         top: 25px;
 16 |     }
 17 | 
 18 |     #canvas {
 19 |         background: #ffffff;
 20 |         cursor: pointer;
 21 |         margin-left: 10px;
 22 |         margin-top: 10px;
 23 |         box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
 24 |     }
 25 | 
 26 |     input[type='button'] {
 27 |         background: cornflowerblue;
 28 |         cursor: pointer;
 29 |         border-radius: 10px;
 30 |     }
 31 | </style>
 32 | <body>
 33 | 
 34 | <canvas id="canvas" width="600" height="400"></canvas>
 35 | 
 36 | <div id="controls">
 37 | 
 38 |     Stroke Color:<select id="strokeStyleSelect" style="margin-right: 20px">
 39 |     <option value="red">red</option>
 40 |     <option value="green">green</option>
 41 |     <option value="blue">blue</option>
 42 |     <option value="orange">orange</option>
 43 | 
 44 | </select>
 45 |     Guidewires(坐标辅助线):
 46 |     <input type="checkbox" id="guidewireCheckbox" checked style="margin-right: 20px">
 47 |     矩形选框
 48 |     <input type="checkbox" id="RectangleCheckbox" style="margin-right: 20px">
 49 |     <input type="button" id="eraseAllButton" value="清空画布">
 50 | </div>
 51 | <p>设置笔触颜色，是否添加辅助线，是否使用矩形选框，然后再画布上绘画。如有需要，使用"清除画布"按钮</p>
 52 | </body>
 53 | <script>
 54 |     let canvas = document.getElementById('canvas'),
 55 |         context = canvas.getContext('2d'),
 56 |         eraseAllButton = document.getElementById('eraseAllButton'),
 57 |         guidewireCheckbox = document.getElementById('guidewireCheckbox'),
 58 |         strokeStyleSelect = document.getElementById('strokeStyleSelect'),
 59 |         RectangleCheckbox = document.getElementById('RectangleCheckbox'),
 60 |         drawingSurfaceImageData,
 61 |         mousedown = {},
 62 |         rubberbandRect = {},
 63 |         dragging = false,
 64 |         guidewires = guidewireCheckbox.checked,
 65 |         rectangle = RectangleCheckbox.checked;
 66 | 
 67 |     //Function……
 68 | 
 69 |     /**
 70 |      * 画网格
 71 |      * @param color
 72 |      * @param stepX
 73 |      * @param stepY
 74 |      */
 75 |     function drawGrid(color, stepX, stepY) {
 76 |         context.save();
 77 |         context.lineWidth = 0.5;
 78 |         context.strokeStyle = color;
 79 | 
 80 |         for (var i = stepX + 0.5; i < canvas.width; i += stepX) {
 81 |             context.beginPath();
 82 |             context.moveTo(i, 0 + 0.5);
 83 |             context.lineTo(i, canvas.height + 0.5)
 84 |             context.stroke();
 85 |         }
 86 | 
 87 |         for (var i = stepY + 0.5; i < canvas.height; i += stepY) {
 88 |             context.beginPath();
 89 |             context.moveTo(0 + 0.5, i);
 90 |             context.lineTo(canvas.width, i);
 91 |             context.stroke();
 92 |         }
 93 |         context.restore();
 94 |     }
 95 | 
 96 |     /**
 97 |      * 坐标转化为canvas坐标
 98 |      * @param x
 99 |      * @param y
100 |      */
101 |     function windowToCanvas(x, y) {
102 |         //返回元素的大小以及位置
103 |         var bbox = canvas.getBoundingClientRect();
104 |         return {x: x - bbox.left * (canvas.width / bbox.width), y: y - bbox.top * (canvas.height / bbox.height)};
105 | 
106 |     }
107 | 
108 |     //保存和恢复绘图面板
109 | 
110 |     function saveDrawingSurface() {
111 |         drawingSurfaceImageData = context.getImageData(0, 0, canvas.width, canvas.height);
112 |     }
113 | 
114 |     function restoreDrawingSurface() {
115 |         context.putImageData(drawingSurfaceImageData, 0, 0);
116 |     }
117 | 
118 |     //Rubber bands
119 | 
120 |     /**
121 |      * 更新橡皮筋矩形
122 |      * @param loc
123 |      */
124 |     function updateRubberbandRectangle(loc) {
125 |         rubberbandRect.width = Math.abs(loc.x - mousedown.x);
126 |         rubberbandRect.height = Math.abs(loc.y - mousedown.y);
127 | 
128 |         //从左往右拉，和从右往左拉的两种情况。主要是判断左边的位置
129 |         //因为从左往右拉的时候，左边x坐标不变
130 |         //从右往左拉的时候，左边线的x坐标需要跟着鼠标移动
131 | 
132 |         if (loc.x > mousedown.x) rubberbandRect.left = mousedown.x;
133 |         else rubberbandRect.left = loc.x;
134 | 
135 |         if (loc.y > mousedown.y) rubberbandRect.top = mousedown.y;
136 |         else rubberbandRect.top = loc.y;
137 | 
138 |         context.save();
139 |         context.beginPath();
140 |         context.rect(rubberbandRect.left, rubberbandRect.top, rubberbandRect.width, rubberbandRect.height);
141 |         context.stroke();
142 |         context.restore();
143 |     }
144 | 
145 |     /**
146 |      * 画可以看得见的线
147 |      * @param loc
148 |      */
149 |     function drawRubberbandShape(loc) {
150 |         context.beginPath();
151 |         context.moveTo(mousedown.x, mousedown.y);
152 |         context.lineTo(loc.x, loc.y);
153 |         context.stroke();
154 |     }
155 | 
156 |     /**
157 |      * 更新橡皮筋
158 |      * @param loc
159 |      */
160 |     function updateRubberband(loc) {
161 |         //如果判断需要画矩形，就执行画矩形方法
162 |         if (rectangle) {
163 |             updateRubberbandRectangle(loc);
164 |         }
165 |         //执行画直线的方法，这里没加if是为了让读者容易理解矩形的绘制方法，因为"draw矩形"是基于"draw直线"的
166 |         drawRubberbandShape(loc);
167 |     }
168 | 
169 |     //Guidewires辅助线
170 |     /**
171 |      * 画水平辅助线，占整个canvas宽度
172 |      * @param y
173 |      */
174 |     function drawHorizontalLine(y) {
175 |         context.beginPath();
176 |         context.moveTo(0, y + 0.5);
177 |         context.lineTo(canvas.width, y + 0.5);
178 |         context.stroke();
179 |     }
180 | 
181 |     /**
182 |      * 画垂直辅助线，占整个canvas高度
183 |      * @param x
184 |      */
185 |     function drawVerticalLine(x) {
186 |         context.beginPath();
187 |         context.moveTo(x + 0.5, 0);
188 |         context.lineTo(x + 0.5, context.canvas.height);
189 |         context.stroke();
190 |     }
191 | 
192 |     /**
193 |      * 画辅助线，并设置属性
194 |      * @param x
195 |      * @param y
196 |      */
197 |     function drawGuidewires(x, y) {
198 |         context.save();
199 |         context.strokeStyle = 'rgba(0,0,230,0.4)';
200 |         context.lineWidth = 0.5;
201 |         drawVerticalLine(x);
202 |         drawHorizontalLine(y);
203 |         context.restore();
204 |     }
205 | 
206 |     //事件
207 | 
208 |     /**
209 |      * 鼠标按下的时候，记录坐标，并设置为拖拽状态
210 |      * @param e
211 |      */
212 |     canvas.onmousedown = function (e) {
213 |         var loc = windowToCanvas(e.clientX, e.clientY);
214 | 
215 |         e.preventDefault();
216 |         saveDrawingSurface();
217 |         mousedown.x = loc.x;
218 |         mousedown.y = loc.y;
219 |         dragging = true;
220 |     };
221 | 
222 |     /**
223 |      * （鼠标按下之后）鼠标移动的时候
224 |      * 判断拖拽中：更新当前连线的位置
225 |      * 判断辅助线显示：添加辅助线
226 |      * @param e
227 |      */
228 |     canvas.onmousemove = function (e) {
229 |         var loc;
230 |         if (dragging) {
231 |             e.preventDefault();
232 |             loc = windowToCanvas(e.clientX, e.clientY);
233 |             restoreDrawingSurface();
234 |             updateRubberband(loc);
235 |             if (guidewires) {
236 |                 drawGuidewires(loc.x, loc.y);
237 |             }
238 |         }
239 | 
240 |     };
241 | 
242 |     /**
243 |      * (拖拽完成后)当鼠标松开时，重新获取本点坐标，清除之前的"跟随鼠标移动的线"，更新连线，取消拖拽状态
244 |      * @param e
245 |      */
246 |     canvas.onmouseup = function (e) {
247 |         loc = windowToCanvas(e.clientX, e.clientY);
248 |         restoreDrawingSurface();
249 |         updateRubberband(loc);
250 |         dragging = false;
251 |     };
252 | 
253 |     //控制器的事件
254 | 
255 |     /**
256 |      * 清除所有画布图像
257 |      * @param ev
258 |      */
259 |     eraseAllButton.onclick = function (ev) {
260 |         context.clearRect(0, 0, canvas.width, canvas.height);
261 |         drawGrid('lightgray', 10, 10);
262 |         saveDrawingSurface();
263 |     };
264 | 
265 |     strokeStyleSelect.onchange = function (ev) {
266 |         context.strokeStyle = strokeStyleSelect.value;
267 |     };
268 | 
269 |     guidewireCheckbox.onchange = function (ev) {
270 |         guidewires = guidewireCheckbox.checked;
271 |     };
272 | 
273 |     RectangleCheckbox.onchange = function (ev) {
274 |         rectangle = RectangleCheckbox.checked;
275 |     };
276 | 
277 |     //init
278 | 
279 |     context.strokeStyle = strokeStyleSelect.value;
280 |     drawGrid('lightgray', 10, 10);
281 | 
282 | </script>
283 | </html>
284 | 


--------------------------------------------------------------------------------
/Unit2/Dashboard.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>仪表盘</title>
  6 |     <style>
  7 |         body {
  8 |             background: #eeeeee;
  9 |         }
 10 | 
 11 |         #canvas {
 12 |             background: #ffffff;
 13 |             cursor: crosshair;
 14 |             margin-left: 10px;
 15 |             margin-top: 10px;
 16 |             -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
 17 |             -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
 18 |             box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
 19 |         }
 20 |     </style>
 21 | </head>
 22 | <body>
 23 | <canvas id="canvas" height="450" width="650">canvas不支持</canvas>
 24 | <p>带刻度的仪表盘</p>
 25 | </body>
 26 | <script>
 27 |     var canvas = document.getElementById('canvas'),
 28 |         context = canvas.getContext('2d'),
 29 | 
 30 |         CENTROID_RADIUS = 10,
 31 |         CENTROID_STROKE_STYLE = 'rgba(0, 0, 0, 0.5)',
 32 |         CENTROID_FILL_STYLE = 'rgba(80, 190, 240, 0.6)',
 33 | 
 34 |         RING_INNER_RADIUS = 35,
 35 |         RING_OUTER_RADIUS = 55,
 36 | 
 37 |         ANNOTATIONS_FILL_STYLE = 'rgba(0, 0, 230, 0.9)',
 38 |         ANNOTATIONS_TEXT_SIZE = 12,
 39 | 
 40 |         TICK_WIDTH = 10,
 41 |         TICK_LONG_STROKE_STYLE = 'rgba(100, 140, 230, 0.9)',
 42 |         TICK_SHORT_STROKE_STYLE = 'rgba(100, 140, 230, 0.7)',
 43 | 
 44 |         TRACKING_DIAL_STROKING_STYLE = 'rgba(100, 140, 230, 0.5)',
 45 | 
 46 |         GUIDEWIRE_STROKE_STYLE = 'goldenrod',
 47 |         GUIDEWIRE_FILL_STYLE = 'rgba(250, 250, 0, 0.6)',
 48 | 
 49 |         circle = {
 50 |             x: canvas.width / 2,
 51 |             y: canvas.height / 2,
 52 |             radius: 150
 53 |         };
 54 | 
 55 | 
 56 |         //Function……
 57 | 
 58 |     /**
 59 |      * 画网格线
 60 |      * @param color
 61 |      * @param stepX
 62 |      * @param steoY
 63 |      */
 64 |     function drawGrid(color,stepX,stepY) {
 65 |         context.save();
 66 | 
 67 |         context.shadowColor = undefined;
 68 |         context.shadowOffsetX = 0;
 69 |         context.shadowOffsetY = 0;
 70 | 
 71 |         context.strokeStyle = color;
 72 |         context.fillStyle = '#ffffff';
 73 |         context.lineWidth = 0.5;
 74 |         context.fillRect(0, 0, context.canvas.width,
 75 |             context.canvas.height);
 76 | 
 77 |         for (var i = stepX + 0.5;
 78 |              i < context.canvas.width; i += stepX) {
 79 |             context.beginPath();
 80 |             context.moveTo(i, 0);
 81 |             context.lineTo(i, context.canvas.height);
 82 |             context.stroke();
 83 |         }
 84 | 
 85 |         for (var i = stepY + 0.5;
 86 |              i < context.canvas.height; i += stepY) {
 87 |             context.beginPath();
 88 |             context.moveTo(0, i);
 89 |             context.lineTo(context.canvas.width, i);
 90 |             context.stroke();
 91 |         }
 92 | 
 93 |         context.restore();
 94 |     }
 95 | 
 96 |     /**
 97 |      * Gial刻度盘的意思
 98 |      * 画刻度盘
 99 |      */
100 |     function drawDial() {
101 |         var loc = {x:circle.x,y:circle.y};
102 | 
103 |         drawCentroid();
104 |         drawCentroidGuidewire(loc);
105 | 
106 |         drawRing();
107 |         drawTickInnerCircle();
108 |         drawTicks();
109 |         drawAnnotations();
110 |     }
111 | 
112 |     /**
113 |      * 绘制重心，圆心
114 |      */
115 |     function drawCentroid() {
116 |         context.beginPath();
117 |         context.save();
118 |         context.strokeStyle =CENTROID_STROKE_STYLE;
119 |         context.fillStyle=CENTROID_FILL_STYLE;
120 |         context.arc(circle.x,circle.y,CENTROID_RADIUS,0,Math.PI*2,false);
121 |         context.stroke();
122 |         context.fill();
123 |         context.restore();
124 |     }
125 | 
126 |     /**
127 |      * 绘制与圆盘中心相连的指针和指针球
128 |      */
129 |     function drawCentroidGuidewire(loc) {
130 |         var angle = -Math.PI/4,
131 |             radius,
132 |             //末端位置
133 |             endpt;
134 | 
135 |         //外圆半径
136 |         radius = circle.radius+RING_OUTER_RADIUS;
137 | 
138 |         //确定指针末端的位置
139 |         if (loc.x >=circle.x){
140 |             endpt = {x:circle.x+radius*Math.cos(angle),
141 |                     y:circle.y+radius*Math.sin(angle)
142 |             };
143 |         }else {
144 |             endpt = { x: circle.x - radius * Math.cos(angle),
145 |                 y: circle.y - radius * Math.sin(angle)
146 |             };
147 |         }
148 | 
149 |         context.save();
150 |         context.strokeStyle=GUIDEWIRE_STROKE_STYLE;
151 |         context.fillStyle=GUIDEWIRE_FILL_STYLE;
152 | 
153 |         //绘制指针
154 |         context.beginPath();
155 |         context.moveTo(circle.x,circle.y);
156 |         context.lineTo(endpt.x,endpt.y);
157 |         context.stroke();
158 | 
159 |         //填充指针末端小球
160 |         context.beginPath();
161 |         context.strokeStyle=TICK_LONG_STROKE_STYLE;
162 |         context.arc(endpt.x,endpt.y,5,0,Math.PI*2,false);
163 |         context.fill();
164 |         context.stroke();
165 | 
166 |         context.restore();
167 |     }
168 | 
169 |     /**
170 |      *  画环
171 |      */
172 |     function drawRing() {
173 |         drawRingOuterCircle();
174 | 
175 |         context.strokeStyle='rgba(0,0,0,0.1)';
176 |         context.arc(circle.x,circle.y,circle.radius+RING_INNER_RADIUS,0,Math.PI*2,false);
177 | 
178 |         context.fillStyle='rgba(100,140,230,0.1)';
179 |         context.fill();
180 |         context.stroke();
181 |     }
182 | 
183 |     /**
184 |      * 画外层环带
185 |      */
186 |     function drawRingOuterCircle() {
187 |         context.shadowColor='rgba(0,0,0,0.7)';
188 |         context.shadowOffsetX=3;
189 |         context.shadowOffsetY=3;
190 |         context.shadowBlur=6;
191 |         context.strokeStyle=TRACKING_DIAL_STROKING_STYLE;
192 |         context.beginPath();
193 |         context.arc(circle.x,circle.y,circle.radius+RING_OUTER_RADIUS,0,Math.PI*2,true);
194 |         context.stroke();
195 |     }
196 | 
197 |     /**
198 |      * 画最内层细环
199 |      */
200 |     function drawTickInnerCircle() {
201 |         context.save();
202 |         context.beginPath();
203 |         context.strokeStyle='rgba(0,0,0,0.1)';
204 |         context.arc(circle.x, circle.y,
205 |             circle.radius + RING_INNER_RADIUS - TICK_WIDTH,
206 |             0, Math.PI*2, false);
207 |         context.stroke();
208 |         context.restore();
209 |     }
210 | 
211 |     /**
212 |      * 画每个刻度线的方法
213 |      * @param angle
214 |      * @param radius
215 |      * @param cnt
216 |      */
217 |     function drawTick(angle,radius,cnt) {
218 |         var tickWidth = cnt%4 ===0?TICK_WIDTH:TICK_WIDTH/2;
219 | 
220 |         context.beginPath();
221 | 
222 |         //利用三角函数确定小刻度两端的位置并连线
223 |         context.moveTo(circle.x+Math.cos(angle)*(radius-tickWidth),circle.y+Math.sin(angle)*(radius-tickWidth));
224 |         context.lineTo(circle.x+Math.cos(angle)*radius,circle.y+Math.sin(angle)*radius);
225 | 
226 |         context.strokeStyle=TICK_SHORT_STROKE_STYLE;
227 |         context.stroke();
228 |     }
229 | 
230 |     /**
231 |      * 画所有刻度线
232 |      */
233 |     function drawTicks() {
234 |         var radius = circle.radius+RING_INNER_RADIUS,
235 |             ANGLE_MAX =2*Math.PI,
236 |             //每个小格的角度，注意这里是除以64，因为
237 |             ANGLE_DELTA = Math.PI/64,
238 |             tickWidth;
239 |         
240 |         context.save();
241 |         
242 |         for (var angle = 0,cnt = 0;angle<ANGLE_MAX;angle+=ANGLE_DELTA,cnt++){
243 |             drawTick(angle,radius,cnt);
244 |         } 
245 |         
246 |         context.restore();
247 |     }
248 | 
249 |     /**
250 |      * 添加刻度数字,通过角度计算出数字
251 |      */
252 |     function drawAnnotations() {
253 |         var radius = circle.radius+RING_INNER_RADIUS;
254 | 
255 |         context.save();
256 |         context.fillStyle = ANNOTATIONS_FILL_STYLE;
257 |         context.font = ANNOTATIONS_TEXT_SIZE+'px Helvetica';
258 | 
259 |         for (var angle=0;angle<2*Math.PI;angle+=Math.PI/8){
260 |             context.beginPath();
261 |             context.fillText((angle * 180 / Math.PI).toFixed(0), circle.x + Math.cos(angle) * (radius - TICK_WIDTH * 2), circle.y - Math.sin(angle) * (radius - TICK_WIDTH * 2));
262 |         }
263 |         context.restore();
264 |     }
265 | 
266 |     //Init
267 | 
268 |     context.shadowBlur=4;
269 |     context.shadowOffsetY=2;
270 |     context.shadowOffsetX=2;
271 | 
272 |     context.textAlign='center';
273 |     context.textBaseline='middle';
274 |     drawGrid('lightgray',10,10);
275 |     drawDial()
276 | </script>
277 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # CanvasStudy
  2 | 
  3 | 
  4 | ## 关于Canvas（About Canvas）
  5 | 
  6 | &emsp;&emsp; Canvas API 提供了一个通过JavaScript和HTML的&lt;canvas&gt;元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
  7 | 
  8 | &emsp;&emsp;Canvas API主要聚焦于2D图形。而同样使用&lt;canvas&gt;元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。
  9 | 
 10 | &emsp;&emsp;Canvas可操作的层面是像素级别的，你觉得还有什么它做不到吗？
 11 | 
 12 | ## 介绍（Introduce）
 13 | &emsp;&emsp;本教程是一套详细介绍Canvas的系列学习教程同时也是查阅工具，以实例为主，采用由泛到精的学习结构，所有的小节都有单独的教程页面和HTML文件。
 14 | 
 15 | **如果你想直接开始学习，请直接下拉到[目录区](#contents)。**
 16 | 
 17 | **注意：该教程并未完结，以下是正式版的README说明。**
 18 | 
 19 | 现在，所有教程的讲解均在CSDN博客里书写，以Github Pages在线演示（你可能需要翻墙）。
 20 | 
 21 | 未来，会将所有的教程搬运到一个专门的网站供访问和探讨。
 22 | ## 适用人群(For people)
 23 | - 如果你是想**系统性地学习Canvas**，那么该教程适合你，它拥有全套的Canvas细节介绍。
 24 | - 如果你想要**进一步Canvas某一个特性**，那么此教程适合你，它涵盖了Canvas所有的特性。
 25 | - 如果你在**开发Canvas中遇到了某个bug**，那么此教程适合你，它针对于每个特性都有相应的在线示例。
 26 | 
 27 | ## 预备知识（Knowledge）
 28 | &emsp;&emsp;你最好能熟练运用HTML、JavaScript与CSS技术，举例来说，假设你已经知道如何使用JavaScript语言的原型继承实现一个对象。
 29 | 
 30 | &emsp;&emsp;另外也需要你具备一些基本的数学知识，注如基本的代数运算、三角函数、向量数学以及计量单位的换算。在第一章的末尾，你能找到涵盖上述基础数学知识的讲解。
 31 | 
 32 | &emsp;&emsp;当然，如果你保持一颗积极向上的心，你也可以边学习Canvas边补充你的预备知识技能。因为，这并不难，不是吗？
 33 | 
 34 | ## 创作背景（Creative Background）
 35 | &emsp;&emsp;在浏览了国内主要的Canvas系列讲解后，发现对于Canvas的教程是不健全的，除此之外，那些更适合作为一个查阅工具，而不是适合系统学习。为了让更多的人学习和使用Canvas，我决定出一篇Canvas教程当作自己的处女座，写作的过程中会有不成熟的地方，希望能得到大家的指正和批评。
 36 | 
 37 | &emsp;&emsp;我以《HTML5 Canvas核心技术(图形、动画与游戏开发)》机械工业出版社 为Canvas系列教程的核心参考资料，另外在某些书中没有说明白的，再引用其他平台如MDN来补充和总结。
 38 | 
 39 | &emsp;&emsp;在这里感谢David Geary创作这本书，感谢爱飞翔翻译。
 40 | 
 41 | &emsp;&emsp;为了让所有人都能理解，我尽量精简我的语言和措辞，在阅读完第一章之后，我发现其实这本书还是有很多可以精简和“通俗化”的语句的，于是我就直接总结到我的教程之中。
 42 | 
 43 | &emsp;&emsp;目前本仓库仍在更新中，相应的Demo演示直接打开对应html文件即可。
 44 | 
 45 | &emsp;&emsp;每个文件都在我都CSDN博客专栏中对应都有教程文章
 46 | [Canvas系列教程
 47 | ](https://blog.csdn.net/huoyihengyuan/article/category/9294371)。
 48 | 
 49 | &emsp;&emsp;在之后都更新中，会将所有的演示Demo的在线链接和说明都贴到README中方便大家使用。
 50 | 
 51 | ## <span id="contents"></span> 教程目录（Contents） 
 52 | - 如果你打算系统性学习Canvas，推荐您按照顺序学习，在一定程度上能够节省您的时间。
 53 | - 如果你是要了解某个特性或定位BUG，直接找到对应教程，进入链接查看详细说明和示例。
 54 | 
 55 | ### 第一章·基础知识
 56 | 
 57 | 1. [两套width和height](https://blog.csdn.net/HuoYiHengYuan/article/details/98768351)
 58 | 2. [canvas转图片](https://blog.csdn.net/HuoYiHengYuan/article/details/99671708)
 59 | 3. [toBlob()转Blob](https://blog.csdn.net/HuoYiHengYuan/article/details/99674215)
 60 | 4. [绘图环境](https://blog.csdn.net/HuoYiHengYuan/article/details/99690179)
 61 | 5. [状态的保存和恢复](https://blog.csdn.net/HuoYiHengYuan/article/details/99710761)
 62 | 6. [支持IE6、IE7、IE8](https://blog.csdn.net/HuoYiHengYuan/article/details/99710962)
 63 | 7. [【项目】Canvas时钟](https://blog.csdn.net/HuoYiHengYuan/article/details/99713943)
 64 | 8. [鼠标事件](https://blog.csdn.net/HuoYiHengYuan/article/details/99819255)
 65 | 9. [canvas.width和context.canvas.width](https://blog.csdn.net/HuoYiHengYuan/article/details/99836728)
 66 | 10. [【项目】精灵表坐标查看器](https://blog.csdn.net/HuoYiHengYuan/article/details/99855314)
 67 | 11. [键盘事件](https://blog.csdn.net/HuoYiHengYuan/article/details/99864431)
 68 | 12. [绘制表面的保存与恢复](https://blog.csdn.net/HuoYiHengYuan/article/details/99887366)
 69 | 13. [【项目】100个弹射小球](https://blog.csdn.net/HuoYiHengYuan/article/details/100005577)
 70 | 14. [【项目】橡皮筋选框局部放大器](https://blog.csdn.net/HuoYiHengYuan/article/details/100012229)
 71 | 15. [打印Canvas的内容](https://blog.csdn.net/HuoYiHengYuan/article/details/100017900)
 72 | 16. [数学知识:代数方程、三角函数、向量运算](https://blog.csdn.net/HuoYiHengYuan/article/details/100045570)
 73 | 17. [第一章-章末小结](https://blog.csdn.net/HuoYiHengYuan/article/details/100048001)
 74 | 
 75 | ### 第二章·绘制
 76 | 
 77 | 1. [Canvas绘制模型：canvas的浏览器渲染过程原理](https://blog.csdn.net/HuoYiHengYuan/article/details/100051229)
 78 | 2. [矩形的绘制](https://blog.csdn.net/HuoYiHengYuan/article/details/100060912)
 79 | 3. [颜色与透明度](https://blog.csdn.net/HuoYiHengYuan/article/details/100080538)
 80 | 4. [渐变色和图案](https://blog.csdn.net/HuoYiHengYuan/article/details/100083546)
 81 | 5. [阴影](https://blog.csdn.net/HuoYiHengYuan/article/details/100093188)
 82 | 6. [路径(path)、描边(stroke)与填充(fill)详细介绍](https://blog.csdn.net/HuoYiHengYuan/article/details/100097238)
 83 | 7. [剪纸效果/镂空效果](https://blog.csdn.net/HuoYiHengYuan/article/details/100127744)
 84 | 8. [线段、网格、像素边界](https://blog.csdn.net/HuoYiHengYuan/article/details/100133611)
 85 | 9. [坐标轴的绘制(带刻度线)](https://blog.csdn.net/HuoYiHengYuan/article/details/100152080)
 86 | 10. [【项目】画板——直线和矩形选区的实现](https://blog.csdn.net/HuoYiHengYuan/article/details/100179518)
 87 | 11. [虚线和蚂蚁线](https://blog.csdn.net/HuoYiHengYuan/article/details/100188987)
 88 | 12. [CanvasRenderingContext2D扩展新方法和新属性](https://blog.csdn.net/HuoYiHengYuan/article/details/100190323)
 89 | 13. [线段端点和连接点](https://blog.csdn.net/HuoYiHengYuan/article/details/100377904)
 90 | 14. [圆和圆弧](https://blog.csdn.net/HuoYiHengYuan/article/details/100516741)
 91 | 15. [【项目】画板——圆的实现](https://blog.csdn.net/HuoYiHengYuan/article/details/100529003)
 92 | 16. [【项目】数字刻度仪表盘](https://blog.csdn.net/HuoYiHengYuan/article/details/100547808)
 93 | 17. [【项目】网格线背景（可作为HTML模版来用）](https://blog.csdn.net/HuoYiHengYuan/article/details/100556626)
 94 | 18. [二次方贝塞尔曲线(复选框对勾和圆角三角形)](https://blog.csdn.net/HuoYiHengYuan/article/details/100679648)
 95 | 19. [三次方贝塞尔曲线](https://blog.csdn.net/HuoYiHengYuan/article/details/100713817)
 96 | 20. [多边形(三角形、矩形、五边形、六边形……)](https://blog.csdn.net/HuoYiHengYuan/article/details/100748594)
 97 | 21. [【项目】画板——多边形的实现](https://blog.csdn.net/HuoYiHengYuan/article/details/100788013)
 98 | 22. [isPointInPath()判断在路径内。（实现拖拽小方块）](https://blog.csdn.net/HuoYiHengYuan/article/details/100836422)
 99 | 23. [【项目】画板——可编辑贝塞尔曲线](https://blog.csdn.net/HuoYiHengYuan/article/details/100862959)
100 | 24. [坐标轴的平移(translate)、缩放(scale)、旋转(totate)、镜像](https://blog.csdn.net/HuoYiHengYuan/article/details/100907020)
101 | 25. [【项目】画板——交互式旋转多边形](https://blog.csdn.net/HuoYiHengYuan/article/details/100972961)
102 | 26. [自定义坐标变换，transform()和setTransform()](https://blog.csdn.net/HuoYiHengYuan/article/details/101023950)
103 | 27. [图像合成，globalCompositeOperation属性](https://blog.csdn.net/HuoYiHengYuan/article/details/101056448)
104 | 28. [【项目】鼠标控制文字旋转缩放](https://blog.csdn.net/HuoYiHengYuan/article/details/101397222)
105 | 29. [剪辑区域，使用clip()实现橡皮擦](https://blog.csdn.net/HuoYiHengYuan/article/details/101467804)
106 | 30. [【项目】画板——橡皮擦工具](https://blog.csdn.net/HuoYiHengYuan/article/details/101478536)
107 | 31. [任意圆角多边形](https://blog.csdn.net/HuoYiHengYuan/article/details/105701602)
108 | 32. [第二章-章末小结](https://blog.csdn.net/HuoYiHengYuan/article/details/101480019)
109 | 
110 | ### 第三章·文本
111 | 
112 | 1. [文本描边(strokeText)、填充(fillText)、阴影效果](https://blog.csdn.net/HuoYiHengYuan/article/details/101599016)
113 | 2. [渐变文本、图案文本](https://blog.csdn.net/HuoYiHengYuan/article/details/101652385)
114 | 3. [font及相关属性(font-style、font-variant、font-weight、font-size、line-height、font-family)](https://blog.csdn.net/HuoYiHengYuan/article/details/101677114)
115 | 4. [font的水平对齐textAlign和垂直对齐textBaseline](https://blog.csdn.net/HuoYiHengYuan/article/details/102459134)
116 | 5. [文本宽度的度量measureText()](https://blog.csdn.net/HuoYiHengYuan/article/details/102498121)
117 | 6. [【项目】给坐标轴添加数字标签](https://blog.csdn.net/HuoYiHengYuan/article/details/102695375)
118 | 7. [【项目】环形文字](https://blog.csdn.net/HuoYiHengYuan/article/details/102721153)
119 | 8. [第三章-章末小结](https://blog.csdn.net/HuoYiHengYuan/article/details/102756052)
120 | 
121 | ### 第四章·图像与视频
122 | 
123 | 1. [将图像和视频帧绘制到canvas中](https://blog.csdn.net/HuoYiHengYuan/article/details/102779152)
124 | 2. [图片缩放到canvas大小](https://blog.csdn.net/HuoYiHengYuan/article/details/102797954)
125 | 
126 | ## 另外（Additional）
127 | 
128 | &emsp;&emsp;在教程之中，我省略了一部分方法的参数介绍，因为你能很容易在网上找到更权威的参数说明，便不再过多解释。
129 | 
130 | &emsp;&emsp;**更新顺序会按照章节顺序更新，更新仍在继续，请保持关注和支持**。
131 | 
132 | ## 联系（Contact）
133 | &emsp;&emsp;**欢迎联系我提建议。**
134 | - 作者：苏一恒
135 | - Email：827652549@qq.com
136 | - QQ：827652549
137 | - QQ群：865327862，在这里我们共同探讨关于Canvas的有趣技术、感谢支持。
138 | <div align="center"><img src="https://827652549.github.io/CanvasStudy/images/QQGroup.jpg" width="200" art="qq群二维码865327862"></div>
139 | 
140 | ## 欢迎修订（Join me）
141 | &emsp;&emsp;如果您对代码中的细节有更合适的修改，欢迎和我一起完善这套教程。
142 | 
143 | &emsp;&emsp;感谢所有人关注和支持的人，欢迎手动点star。
144 | ## 本教程的完善计划（Doing）
145 | &emsp;&emsp;因为该教程是本人的处女作，所以会有很多不完善的地方，希望大家体谅。我虽然能在写作中完善，但是在不断地学习“如果写一篇好教程”的过程中，不能总是折返修改之前的文章，这样会带来太多的时间成本的浪费。
146 | 
147 | &emsp;&emsp;我希望在能尽量减少浪费时间成本的情况下，一步步将本教程完善起来。
148 | 
149 | &emsp;&emsp;于是我决定分阶段不断地完善该教程。
150 | 
151 | - [ ]  第一阶段：**创作文章的内容**。以CSDN博客为文章载体，以Github Pages为在线演示载体，通过链接跳转，达到教程“容易理解”的目的。
152 | - [ ]  第二阶段：**统一每篇教程的格式，修正所有的链接**。例如在前面某些章节中，关于代码的说明有的是直接引入的代码块，有的是链接到Github中；目录有的有，有的没有……
153 | - [ ]  第三阶段：**将教程移植到个人网站，专门服务该教程**。太依托CSDN对于教程的推广，移植到个人网站后，便能够统一化管理，建立各级目录和锚点，在线演示等等都变得方便起来。总的来说，就是让读者更容易学习Canvas这门技术。
154 | - [ ]  第四阶段：**精炼教程，推敲文字，使之更易学习和专业**。在创作初期，受我本人的语言表达能力影响，有些措辞可以更加精确，这就需要下点功夫去修改那些措辞，以追求高质量教程。
155 | - [ ]  第五阶段：**紧跟Canvas标准，添加新特性相关教程**。这个时代，HTML5的标准是Living Standard，来自[WAHTWG](https://html.spec.whatwg.org/multipage/canvas.html)，所以要不断地紧跟潮流，推陈出新，以更加完备的姿态去面临未来的挑战。
156 | 


--------------------------------------------------------------------------------
/Unit2/RadiusShape.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>自定义圆角</title>
  6 |     <style>
  7 |         canvas {
  8 |             border: 1px solid black;
  9 |         }
 10 |     </style>
 11 | </head>
 12 | <body>
 13 | <div>已知数组 [{ x, y, radius }, ...], 在canvas中绘制出对应图形</div>
 14 | <canvas id="canvas" width="500" height="500"></canvas>
 15 | </body>
 16 | <script>
 17 |     let canvas = document.getElementById('canvas'),
 18 |         context = canvas.getContext('2d');
 19 | 
 20 |     /**
 21 |      * json说明，几何点应当按照顺时针方向以此填入。
 22 |      */
 23 |     let json = [
 24 |         //正方形
 25 |         // {
 26 |         //     x:10,
 27 |         //     y:10,
 28 |         //     radius:0
 29 |         // },
 30 |         // {
 31 |         //     x:70,
 32 |         //     y:10,
 33 |         //     radius:0
 34 |         // },
 35 |         // {
 36 |         //     x:70,
 37 |         //     y:70,
 38 |         //     radius:0
 39 |         // },
 40 |         // {
 41 |         //     x:10,
 42 |         //     y:70,
 43 |         //     radius:0
 44 |         // },
 45 | 
 46 | 
 47 |         //  奇怪的六边形
 48 |         // {
 49 |         //     x:10,
 50 |         //     y:10,
 51 |         //     radius:1000
 52 |         // },
 53 |         // {
 54 |         //     x:70,
 55 |         //     y:30,
 56 |         //     radius:100000
 57 |         // },
 58 |         // {
 59 |         //     x:60,
 60 |         //     y:50,
 61 |         //     radius:0
 62 |         // },
 63 |         // {
 64 |         //     x:50,
 65 |         //     y:50,
 66 |         //     radius:10
 67 |         // },
 68 |         // {
 69 |         //     x:60,
 70 |         //     y:40,
 71 |         //     radius:10
 72 |         // },
 73 |         // {
 74 |         //     x:40,
 75 |         //     y:30,
 76 |         //     radius:100
 77 |         // },
 78 | 
 79 | 
 80 |         // // 不规则的四边形
 81 |         // {
 82 |         //     x: 286 / 2,
 83 |         //     y: 293 / 2,
 84 |         //     radius: 4000 / 2
 85 |         // },
 86 |         // {
 87 |         //     x: 400 / 2,
 88 |         //     y: 200 / 2,
 89 |         //     radius: 50 / 2
 90 |         // },
 91 |         // {
 92 |         //     x: 400 / 2,
 93 |         //     y: 400 / 2,
 94 |         //     radius: 40 / 2
 95 |         // },
 96 |         // {
 97 |         //     x: 200 / 2,
 98 |         //     y: 400 / 2,
 99 |         //     radius: 50 / 2
100 |         // },
101 | 
102 | 
103 |         //具有内角的五边形
104 | 
105 | 
106 |         {
107 |             x:60,
108 |             y:80,
109 |             radius: 10
110 |         },
111 |         {
112 |             x:10,
113 |             y:80,
114 |             radius: 10
115 |         },
116 |         {
117 |             x:10,
118 |             y:10,
119 |             radius: 10
120 |         },
121 |         {
122 |             x:60,
123 |             y:5,
124 |             radius: 10
125 |         },
126 |         {
127 |             x:30,
128 |             y:50,
129 |             radius: 10
130 |         },
131 | 
132 | 
133 | 
134 |     ];
135 | 
136 |     drawShape(json2HandlePoint(json));
137 | 
138 | 
139 |     /**
140 |      * 将json点集转化为可操作点handlePoints
141 |      */
142 |     function json2HandlePoint(json) {
143 | 
144 |         let copyJson = JSON.parse(JSON.stringify(json));
145 |         console.log("用户输入的值", copyJson);
146 | 
147 |         //矫正radius
148 |         fixRadius(json);
149 | 
150 |         console.log("画板渲染的值", json);
151 | 
152 | 
153 |         //将所有可操作点保存handlePoint变量中
154 |         let handlePoints = [];
155 | 
156 |         //第一个点
157 |         handlePoints.push({
158 |             start: {x: json[json.length - 1].x, y: json[json.length - 1].y},
159 |             middle: {x: json[0].x, y: json[0].y},
160 |             end: {x: json[1].x, y: json[1].y},
161 |             radius: json[0].radius
162 |         });
163 | 
164 |         //中间所有点
165 |         for (let i = 1; i < json.length - 1; i++) {
166 |             handlePoints.push({
167 |                 start: {x: json[i - 1].x, y: json[i - 1].y},
168 |                 middle: {x: json[i].x, y: json[i].y},
169 |                 end: {x: json[i + 1].x, y: json[i + 1].y},
170 |                 radius: json[i].radius
171 |             });
172 |         }
173 | 
174 |         //最后一个点
175 |         handlePoints.push({
176 |             start: {x: json[json.length - 2].x, y: json[json.length - 2].y},
177 |             middle: {x: json[json.length - 1].x, y: json[json.length - 1].y},
178 |             end: {x: json[0].x, y: json[0].y},
179 |             radius: json[json.length - 1].radius
180 |         });
181 | 
182 | 
183 |         return handlePoints;
184 |     }
185 | 
186 |     /**
187 |      * 将异常json的radius按照Sketch模式矫正
188 |      * sketch圆角异常数据处理方法：
189 | 
190 |      用户可设定radius值，当出现不合法值的时候，原值不变，图像自行优化
191 | 
192 |      说明：如100*50的矩形，可以在50像素的边对应的角，各设置成radius=25，也可以其中一个设为0，另一个设为50，总之就是radius1+radius2=50。当radius1+radius2>50的时候，在绘制里，radius_min不变，radius_max = 50/2,而在json数据中不改变这些数据，已保存用户的数据记录
193 |      */
194 |     function fixRadius(json) {
195 |         //第一个点
196 |         _fixRadius(json[json.length - 1], json[0], json[1]);
197 | 
198 |         for (let i = 1; i < json.length - 1; i++) {
199 |             _fixRadius(json[i - 1], json[i], json[i + 1]);
200 |         }
201 | 
202 |         //最后一个点
203 |         _fixRadius(json[json.length - 2], json[json.length - 1], json[0]);
204 |     }
205 | 
206 |     function _fixRadius(left, curr, right) {
207 |         let {pow, acos, tan} = Math;
208 | 
209 |         const leftLine = pow(pow(left.x - curr.x, 2) + pow(left.y - curr.y, 2), 0.5);
210 |         const rightLine = pow(pow(right.x - curr.x, 2) + pow(right.y - curr.y, 2), 0.5);
211 | 
212 |         //两边最短边
213 |         const minLine = leftLine < rightLine ? leftLine : rightLine;
214 |         //中间角度
215 |         const angleCurr = acos(((left.x - curr.x) * (right.x - curr.x) + (left.y - curr.y) * (right.y - curr.y)) / (leftLine * rightLine));
216 |         //理论上能实现的最大弧度半径
217 |         let maxRadius = minLine * tan(angleCurr / 2);
218 | 
219 | 
220 | 
221 |         /*
222 |             当左右都为0且，当前radius超过理论最大弧度半径时
223 |             将radius缩减到最大弧度半径
224 |          */
225 |         if (left.radius === 0 && right.radius === 0) {
226 |             if (curr.radius > maxRadius) {
227 |                 curr.radius = maxRadius;
228 |             }
229 |         }
230 | 
231 |         /*
232 |             当左右任意一边有值，且radius超过理论最大弧度半径的一半时
233 |             将radius缩减到最大弧度半径的一半
234 |          */
235 | 
236 |         if (left.radius > 0 || right.radius > 0) {
237 |             if (curr.radius > maxRadius / 2) {
238 |                 curr.radius = maxRadius / 2;
239 |             }
240 |         }
241 | 
242 |     }
243 | 
244 |     function drawShape(handlePoints) {
245 |         //重置路径
246 |         context.beginPath();
247 | 
248 | 
249 |         let currPoint = undefined;
250 | 
251 |         const origin = _toOrigin(handlePoints[0].start, handlePoints[0].middle, handlePoints[0].end, handlePoints[0].radius);
252 | 
253 |         context.moveTo(origin.x, origin.y);
254 | 
255 |         // 测试：添加数字标记
256 |         // context.fillText('0', origin.x, origin.y);
257 | 
258 | 
259 |         for (let i = 1; i < handlePoints.length; i++) {
260 |             currPoint = handlePoints[i];
261 | 
262 |             //绘制圆弧
263 |             context.arcTo(currPoint.middle.x, currPoint.middle.y, currPoint.end.x, currPoint.end.y, currPoint.radius);
264 | 
265 | 
266 |             // 测试：添加数字标记
267 |             // context.fillText(i, currPoint.middle.x, currPoint.middle.y);
268 |         }
269 | 
270 |         currPoint = handlePoints[0];
271 |         context.arcTo(currPoint.middle.x, currPoint.middle.y, currPoint.end.x, currPoint.end.y, currPoint.radius);
272 | 
273 |         context.stroke();
274 |         context.closePath();
275 |     }
276 | 
277 |     /**
278 |      * 已知A、B、C三点坐标，求半径为r的内切圆与AC的切点坐标
279 |      * @param A
280 |      * @param B
281 |      * @param C
282 |      * @param r
283 |      * @returns {{x: *, y: *}}
284 |      */
285 |     function _toOrigin(A, B, C, r) {
286 |         let {pow, acos, tan} = Math;
287 | 
288 |         //ab的长度
289 |         const ab = pow(pow(A.x - B.x, 2) + pow(A.y - B.y, 2), 0.5);
290 |         //bc的长度
291 |         const bc = pow(pow(C.x - B.x, 2) + pow(C.y - B.y, 2), 0.5);
292 | 
293 |         //B的角度
294 |         const angleB = acos(((A.x - B.x) * (C.x - B.x) + (A.y - B.y) * (C.y - B.y)) / (ab * bc));
295 | 
296 |         //BM的长度,即B到切线的长度
297 |         const M = r / tan(angleB / 2);
298 | 
299 | 
300 |         const k = (C.y - B.y) / (C.x - B.x);
301 | 
302 | 
303 |         if (k == '-Infinity') {
304 |             return {
305 |                 x: B.x,
306 |                 y: B.y - M
307 |             };
308 |         } else if (k == 'Infinity') {
309 |             return {
310 |                 x: B.x,
311 |                 y: B.y + M
312 |             };
313 |         } else {
314 |             let i = 1;
315 | 
316 |             if (1 / k == '-Infinity') {
317 |                 i = -1;
318 |             }
319 | 
320 |             if (k < 0) {
321 |                 if ((C.y - B.y) < 0) {
322 |                     i = 1;
323 |                 } else {
324 |                     i = -1;
325 |                 }
326 |             }
327 | 
328 |             if (k > 0) {
329 |                 if (C.y - B.y < 0) {
330 |                     i = -1;
331 |                 }
332 |             }
333 | 
334 | 
335 |             return {
336 |                 x: B.x + (1 / pow(1 + k * k, 0.5)) * M * i,
337 |                 y: B.y + (k / pow(1 + k * k, 0.5)) * M * i
338 |             };
339 |         }
340 | 
341 | 
342 |     }
343 | 
344 | 
345 | </script>
346 | </html>
347 | 


--------------------------------------------------------------------------------
/Unit2/PolygonDraw.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh">
  3 | <head>
  4 |     <title>多边形画板，绘制多边形</title>
  5 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6 | 
  7 |     <style>
  8 |         body {
  9 |             background: #eeeeee;
 10 |         }
 11 | 
 12 |         #controls {
 13 |             position: absolute;
 14 |             left: 25px;
 15 |             top: 25px;
 16 |         }
 17 | 
 18 |         #canvas {
 19 |             background: #ffffff;
 20 |             cursor: pointer;
 21 |             margin-left: 10px;
 22 |             margin-top: 10px;
 23 |             -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
 24 |             -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
 25 |             box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
 26 |         }
 27 |     </style>
 28 | </head>
 29 | 
 30 | <body>
 31 | <canvas id='canvas' width='850' height='600'>
 32 |     Canvas not supported
 33 | </canvas>
 34 | 
 35 | <div id='controls'>
 36 |     <label for='strokeStyleSelect'> Stroke color:</label><select id='strokeStyleSelect'>
 37 |     <option value='red'>red</option>
 38 |     <option value='green'>green</option>
 39 |     <option value='blue'>blue</option>
 40 |     <option value='orange'>orange</option>
 41 |     <option value='cornflowerblue' selected>cornflowerblue</option>
 42 |     <option value='goldenrod'>goldenrod</option>
 43 |     <option value='navy'>navy</option>
 44 |     <option value='purple'>purple</option>
 45 | </select>
 46 | 
 47 |     <label for='fillStyleSelect'>Fill color: </label><select id='fillStyleSelect'>
 48 |     <option value='rgba(255,0,0,0.5)'>semi-transparent red</option>
 49 |     <option value='green'>green</option>
 50 |     <option value='rgba(0,0,255,0.5)'>semi-transparent blue</option>
 51 |     <option value='orange'>orange</option>
 52 |     <option value='rgba(100,140,230,0.5)'>semi-transparent cornflowerblue</option>
 53 |     <option value='goldenrod' selected>goldenrod</option>
 54 |     <option value='navy'>navy</option>
 55 |     <option value='purple'>purple</option>
 56 | </select>
 57 | 
 58 |     <label for='sidesSelect'>Sides: </label><select id='sidesSelect'>
 59 |     <option value=3 selected>3</option>
 60 |     <option value=4>4</option>
 61 |     <option value=5>5</option>
 62 |     <option value=6>6</option>
 63 |     <option value=7>7</option>
 64 |     <option value=8>8</option>
 65 |     <option value=9>9</option>
 66 | </select>
 67 | 
 68 |     <label for='startAngleSelect'>Start angle: </label><select id='startAngleSelect'>
 69 |     <option value=0 selected>0</option>
 70 |     <option value=22.5>22.5</option>
 71 |     <option value=45>45</option>
 72 |     <option value=67.5>67.5</option>
 73 |     <option value=90>90</option>
 74 | </select>
 75 | 
 76 |     <label for='fillCheckbox'>Fill</label><input id='fillCheckbox' type='checkbox' checked/>
 77 |     <input id='eraseAllButton' type='button' value='Erase all'/>
 78 | </div>
 79 | </body>
 80 | <script>
 81 |     'use strict';
 82 | 
 83 |     var canvas = document.getElementById('canvas'),
 84 |         context = canvas.getContext('2d'),
 85 |         eraseAllButton = document.getElementById('eraseAllButton'),
 86 |         strokeStyleSelect = document.getElementById('strokeStyleSelect'),
 87 |         startAngleSelect = document.getElementById('startAngleSelect'),
 88 | 
 89 |         fillStyleSelect = document.getElementById('fillStyleSelect'),
 90 |         fillCheckbox = document.getElementById('fillCheckbox'),
 91 | 
 92 |         sidesSelect = document.getElementById('sidesSelect'),
 93 | 
 94 |         drawingSurfaceImageData,
 95 | 
 96 |         mousedown = {},
 97 |         rubberbandRect = {},
 98 |         dragging = false,
 99 | 
100 |         sides = 8,
101 |         startAngle = 0,
102 | 
103 |         guidewires = true,
104 | 
105 |         Point = function (x, y) {
106 |             this.x = x;
107 |             this.y = y;
108 |         };
109 | 
110 | 
111 |     // Functions.....................................................
112 | 
113 |     function drawGrid(color, stepx, stepy) {
114 |         context.save()
115 | 
116 |         context.strokeStyle = color;
117 |         context.fillStyle = '#ffffff';
118 |         context.lineWidth = 0.5;
119 |         context.fillRect(0, 0, context.canvas.width, context.canvas.height);
120 | 
121 |         for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
122 |             context.beginPath();
123 |             context.moveTo(i, 0);
124 |             context.lineTo(i, context.canvas.height);
125 |             context.stroke();
126 |         }
127 | 
128 |         for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
129 |             context.beginPath();
130 |             context.moveTo(0, i);
131 |             context.lineTo(context.canvas.width, i);
132 |             context.stroke();
133 |         }
134 | 
135 |         context.restore();
136 |     }
137 | 
138 |     function windowToCanvas(e) {
139 |         var x = e.x || e.clientX,
140 |             y = e.y || e.clientY,
141 |             bbox = canvas.getBoundingClientRect();
142 | 
143 |         return { x: x - bbox.left * (canvas.width  / bbox.width),
144 |             y: y - bbox.top  * (canvas.height / bbox.height)
145 |         };
146 |     }
147 | 
148 |     // save和restore的服务区域
149 | 
150 |     function saveDrawingSurface() {
151 |         drawingSurfaceImageData = context.getImageData(0, 0,
152 |             canvas.width,
153 |             canvas.height);
154 |     }
155 | 
156 |     function restoreDrawingSurface() {
157 |         context.putImageData(drawingSurfaceImageData, 0, 0);
158 |     }
159 | 
160 |     // Rubberbands...................................................
161 | 
162 |     function updateRubberbandRectangle(loc) {
163 |         rubberbandRect.width = Math.abs(loc.x - mousedown.x);
164 |         rubberbandRect.height = Math.abs(loc.y - mousedown.y);
165 | 
166 |         if (loc.x > mousedown.x) rubberbandRect.left = mousedown.x;
167 |         else                     rubberbandRect.left = loc.x;
168 | 
169 |         if (loc.y > mousedown.y) rubberbandRect.top = mousedown.y;
170 |         else                     rubberbandRect.top = loc.y;
171 |     }
172 | 
173 |     function getPolygonPoints(centerX, centerY, radius, sides, startAngle) {
174 |         var points = [],
175 |             angle = startAngle || 0;
176 | 
177 |         for (var i=0; i < sides; ++i) {
178 |             points.push(new Point(centerX + radius * Math.sin(angle),
179 |                 centerY - radius * Math.cos(angle)));
180 |             angle += 2*Math.PI/sides;
181 |         }
182 | 
183 |         return points;
184 |     }
185 | 
186 |     function createPolygonPath(centerX, centerY, radius, sides, startAngle) {
187 |         var points = getPolygonPoints(centerX, centerY, radius, sides, startAngle);
188 | 
189 |         context.beginPath();
190 | 
191 |         context.moveTo(points[0].x, points[0].y);
192 | 
193 |         for (var i=1; i < sides; ++i) {
194 |             context.lineTo(points[i].x, points[i].y);
195 |         }
196 | 
197 |         context.closePath();
198 |     }
199 | 
200 |     function drawRubberbandShape(loc, sides, startAngle) {
201 |         createPolygonPath(mousedown.x, mousedown.y,
202 |             rubberbandRect.width,
203 |             parseInt(sidesSelect.value),
204 |             (Math.PI / 180) * parseInt(startAngleSelect.value));
205 |         context.stroke();
206 | 
207 |         if (fillCheckbox.checked) {
208 |             context.fill();
209 |         }
210 |     }
211 | 
212 |     function updateRubberband(loc, sides, startAngle) {
213 |         updateRubberbandRectangle(loc);
214 |         drawRubberbandShape(loc, sides, startAngle);
215 |     }
216 | 
217 |     // Guidewires....................................................
218 | 
219 |     function drawHorizontalLine (y) {
220 |         context.beginPath();
221 |         context.moveTo(0,y+0.5);
222 |         context.lineTo(context.canvas.width,y+0.5);
223 |         context.stroke();
224 |     }
225 | 
226 |     function drawVerticalLine (x) {
227 |         context.beginPath();
228 |         context.moveTo(x+0.5,0);
229 |         context.lineTo(x+0.5,context.canvas.height);
230 |         context.stroke();
231 |     }
232 | 
233 |     function drawGuidewires(x, y) {
234 |         context.save();
235 |         context.strokeStyle = 'rgba(0,0,230,0.4)';
236 |         context.lineWidth = 0.5;
237 |         drawVerticalLine(x);
238 |         drawHorizontalLine(y);
239 |         context.restore();
240 |     }
241 | 
242 |     // Event handlers................................................
243 | 
244 |     canvas.onmousedown = function (e) {
245 |         var loc = windowToCanvas(e);
246 | 
247 |         saveDrawingSurface();
248 | 
249 |         e.preventDefault();
250 | 
251 |         saveDrawingSurface();
252 |         mousedown.x = loc.x;
253 |         mousedown.y = loc.y;
254 |         dragging = true;
255 |     };
256 | 
257 |     canvas.onmousemove = function (e) {
258 |         var loc;
259 | 
260 |         if (dragging) {
261 |             e.preventDefault();
262 | 
263 |             loc = windowToCanvas(e);
264 |             restoreDrawingSurface();
265 |             updateRubberband(loc, sides, startAngle);
266 | 
267 |             if (guidewires) {
268 |                 drawGuidewires(mousedown.x, mousedown.y);
269 |             }
270 |         }
271 |     };
272 | 
273 |     canvas.onmouseup = function (e) {
274 |         var loc = windowToCanvas(e);
275 |         dragging = false;
276 |         restoreDrawingSurface();
277 |         updateRubberband(loc);
278 |     };
279 | 
280 |     eraseAllButton.onclick = function (e) {
281 |         context.clearRect(0, 0, canvas.width, canvas.height);
282 |         drawGrid('lightgray', 10, 10);
283 |         saveDrawingSurface();
284 |     };
285 | 
286 |     strokeStyleSelect.onchange = function (e) {
287 |         context.strokeStyle = strokeStyleSelect.value;
288 |     };
289 | 
290 |     fillStyleSelect.onchange = function (e) {
291 |         context.fillStyle = fillStyleSelect.value;
292 |     };
293 | 
294 |     // 初始化
295 | 
296 |     context.strokeStyle = strokeStyleSelect.value;
297 |     context.fillStyle = fillStyleSelect.value;
298 |     drawGrid('lightgray', 10, 10);
299 | </script>
300 | </html>


--------------------------------------------------------------------------------
/Unit2/EditableBezierCurves.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>可编辑的贝塞尔曲线</title>
  6 |     <style>
  7 |         body {
  8 |             background: #eeeeee;
  9 |         }
 10 | 
 11 |         .floatingControls {
 12 |             position: absolute;
 13 |             left: 150px;
 14 |             top: 100px;
 15 |             width: 300px;
 16 |             padding: 20px;
 17 |             border: thin solid rgba(0, 0, 0, 0.3);
 18 |             background: rgba(0, 0, 200, 0.1);
 19 |             color: blue;
 20 |             font: 14px Arial;
 21 |             -webkit-box-shadow: rgba(0, 0, 0, 0.2) 6px 6px 8px;
 22 |             -moz-box-shadow: rgba(0, 0, 0, 0.2) 6px 6px 8px;
 23 |             box-shadow: rgba(0, 0, 0, 0.2) 6px 6px 8px;
 24 |             display: none;
 25 |         }
 26 | 
 27 |         .floatingControls p {
 28 |             margin-top: 0px;
 29 |             margin-bottom: 20px;
 30 |         }
 31 | 
 32 | 
 33 |         #controls {
 34 |             position: absolute;
 35 |             left: 25px;
 36 |             top: 25px;
 37 |         }
 38 | 
 39 |         #canvas {
 40 |             background: #ffffff;
 41 |             cursor: pointer;
 42 |             margin-left: 10px;
 43 |             margin-top: 10px;
 44 |             -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
 45 |             -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
 46 |             box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
 47 |         }
 48 |     </style>
 49 | </head>
 50 | <body>
 51 | <canvas id="canvas" width="605" height="400">Canvas not supported</canvas>
 52 | <div id='controls'>
 53 |     Stroke color: <select id='strokeStyleSelect'>
 54 |     <option value='red'>red</option>
 55 |     <option value='green'>green</option>
 56 |     <option value='blue'>blue</option>
 57 |     <option value='orange'>orange</option>
 58 |     <option value='cornflowerblue'>cornflowerblue</option>
 59 |     <option value='goldenrod'>goldenrod</option>
 60 |     <option value='navy' selected>navy</option>
 61 |     <option value='purple'>purple</option>
 62 | </select>
 63 |     Guidewires: <input id='guidewireCheckbox' type='checkbox' checked/>
 64 |     <input id='eraseAllButton' type='button' value='Erase all'/>
 65 | </div>
 66 | <div id='instructions' class='floatingControls'>
 67 |     <p>拖动贝塞尔曲线的锚点和控制点以改变曲线的形状</p>
 68 | 
 69 |     <p>当你完成曲线形状的编辑后，点击曲线外的一点，以完成此图像</p>
 70 | 
 71 |     <input id='instructionsOkayButton' type='button' value='好的' autofocus/>
 72 |     <input id='instructionsNoMoreButton' type='button'
 73 |            value='不再提示'/>
 74 | </div>
 75 | </body>
 76 | <script>
 77 |     'use strict';
 78 | 
 79 |     let canvas = document.getElementById('canvas'),
 80 |         context = canvas.getContext('2d'),
 81 |         eraseAllButton = document.getElementById('eraseAllButton'),
 82 |         strokeStyleSelect = document.getElementById('strokeStyleSelect'),
 83 |         guidewireCheckbox = document.getElementById('guidewireCheckbox'),
 84 |         instructions = document.getElementById('instructions'),
 85 |         instructionsOkayButton = document.getElementById('instructionsOkayButton'),
 86 |         instructionsNoMoreButton = document.getElementById('instructionsNoMoreButton'),
 87 | 
 88 |         showInstructions = true,
 89 | 
 90 |         GRID_STROKE_STYLE = 'lightblue',
 91 |         GRID_SPACING = 10,
 92 | 
 93 |         CONTROL_POINT_RADIUS = 5,
 94 |         CONTROL_POINT_STROKE_STYLE = 'blue',
 95 |         CONTROL_POINT_FILL_STYLE = 'rgba(255, 255, 0, 0.5)',
 96 | 
 97 |         END_POINT_STROKE_STYLE = 'navy',
 98 |         END_POINT_FILL_STYLE = 'rgba(0, 255, 0, 0.5)',
 99 | 
100 |         GUIDEWIRE_STROKE_STYLE = 'rgba(0,0,230,0.4)',
101 | 
102 |         drawingImageData,
103 | 
104 |         mousedown = {},
105 |         rubberbandRect = {},
106 | 
107 |         dragging = false,
108 |         draggingPoint = false,
109 | 
110 |         endPoints = [{}, {}],
111 |         controlPoints = [{}, {}],
112 |         editing = false,
113 | 
114 |         guidewires = guidewireCheckbox.checked;
115 | 
116 |     //Function……
117 | 
118 |     /**
119 |      * 画网格线
120 |      * @param color
121 |      * @param stepX
122 |      * @param stepY
123 |      */
124 |     let drawGrid = (color, stepX, stepY) => {
125 |         context.save()
126 | 
127 |         context.strokeStyle = color;
128 |         context.lineWidth = 0.5;
129 |         context.clearRect(0, 0, context.canvas.width, context.canvas.height);
130 | 
131 |         for (var i = stepX + 0.5; i < context.canvas.width; i += stepX) {
132 |             context.beginPath();
133 |             context.moveTo(i, 0);
134 |             context.lineTo(i, context.canvas.height);
135 |             context.stroke();
136 |         }
137 | 
138 |         for (var i = stepY + 0.5; i < context.canvas.height; i += stepY) {
139 |             context.beginPath();
140 |             context.moveTo(0, i);
141 |             context.lineTo(context.canvas.width, i);
142 |             context.stroke();
143 |         }
144 | 
145 |         context.restore();
146 |     };
147 | 
148 |     let updateRubberbandRectangle=(loc)=> {
149 |         rubberbandRect.width  = Math.abs(loc.x - mousedown.x);
150 |         rubberbandRect.height = Math.abs(loc.y - mousedown.y);
151 | 
152 |         if (loc.x > mousedown.x) rubberbandRect.left = mousedown.x;
153 |         else                     rubberbandRect.left = loc.x;
154 | 
155 |         if (loc.y > mousedown.y) rubberbandRect.top = mousedown.y;
156 |         else                     rubberbandRect.top = loc.y;
157 |     };
158 | 
159 |     /**
160 |      * 窗口坐标转化为Canvas坐标
161 |      * @param x
162 |      * @param y
163 |      * @returns {{x: number, y: number}}
164 |      */
165 |     let windowToCanvas = (x, y) => {
166 |         let bbox = canvas.getBoundingClientRect();
167 | 
168 |         return {
169 |             x: x - bbox.left * (canvas.width / bbox.width),
170 |             y: y - bbox.top * (canvas.height / bbox.height)
171 |         };
172 |     };
173 | 
174 |     //保存和恢复绘图表面
175 | 
176 |     let saveDrawingSurface = () => {
177 |         drawingImageData = context.getImageData(0, 0,
178 |             canvas.width, canvas.height);
179 |     };
180 | 
181 |     let restoreDrawingSurface = () => {
182 |         context.putImageData(drawingImageData, 0, 0);
183 |     };
184 | 
185 |     /**
186 |      * 绘制贝塞尔曲线
187 |      */
188 |     let drawBezierCurve = () => {
189 |         context.beginPath();
190 |         context.moveTo(endPoints[0].x, endPoints[0].y);
191 |         context.bezierCurveTo(controlPoints[0].x, controlPoints[0].y,
192 |             controlPoints[1].x, controlPoints[1].y,
193 |             endPoints[1].x, endPoints[1].y);
194 |         context.stroke();
195 |     };
196 | 
197 |     let updateEndAndControlPoints=()=> {
198 |         endPoints[0].x = rubberbandRect.left;
199 |         endPoints[0].y = rubberbandRect.top;
200 | 
201 |         endPoints[1].x = rubberbandRect.left + rubberbandRect.width;
202 |         endPoints[1].y = rubberbandRect.top  + rubberbandRect.height
203 | 
204 |         controlPoints[0].x = rubberbandRect.left;
205 |         controlPoints[0].y = rubberbandRect.top  + rubberbandRect.height
206 | 
207 |         controlPoints[1].x = rubberbandRect.left + rubberbandRect.width;
208 |         controlPoints[1].y = rubberbandRect.top;
209 |     };
210 | 
211 |     let drawRubberbandShape=(loc)=> {
212 |         updateEndAndControlPoints();
213 |         drawBezierCurve();
214 |     };
215 | 
216 |     let updateRubberband=(loc)=> {
217 |         updateRubberbandRectangle(loc);
218 |         drawRubberbandShape(loc);
219 |     };
220 | 
221 |     //辅助线
222 | 
223 |     let drawHorizontalGuidewire = (y) => {
224 |         context.beginPath();
225 |         context.moveTo(0, y + 0.5);
226 |         context.lineTo(context.canvas.width, y + 0.5);
227 |         context.stroke();
228 |     };
229 | 
230 |     let drawVerticalGuidewire = (x) => {
231 |         context.beginPath();
232 |         context.moveTo(x + 0.5, 0);
233 |         context.lineTo(x + 0.5, context.canvas.height);
234 |         context.stroke();
235 |     };
236 | 
237 |     let drawGuidewires = (x, y) => {
238 |         context.save();
239 |         context.strokeStyle = GUIDEWIRE_STROKE_STYLE;
240 |         context.lineWidth = 0.5;
241 |         drawVerticalGuidewire(x);
242 |         drawHorizontalGuidewire(y);
243 |         context.restore();
244 |     };
245 | 
246 |     //绘制锚点和控制点
247 | 
248 |     let drawControlPoint = (index) => {
249 |         context.beginPath();
250 |         context.arc(controlPoints[index].x, controlPoints[index].y,
251 |             CONTROL_POINT_RADIUS, 0, Math.PI * 2, false);
252 |         context.stroke();
253 |         context.fill();
254 |     };
255 | 
256 |     let drawControlPoints = () => {
257 |         context.save();
258 |         context.strokeStyle = CONTROL_POINT_STROKE_STYLE;
259 |         context.fillStyle = CONTROL_POINT_FILL_STYLE;
260 | 
261 |         drawControlPoint(0);
262 |         drawControlPoint(1);
263 | 
264 |         context.stroke();
265 |         context.fill();
266 |         context.restore();
267 |     };
268 | 
269 |     let drawEndPoint = (index) => {
270 |         context.beginPath();
271 |         context.arc(endPoints[index].x, endPoints[index].y,
272 |             CONTROL_POINT_RADIUS, 0, Math.PI * 2, false);
273 |         context.stroke();
274 |         context.fill();
275 |     };
276 | 
277 |     let drawEndPoints = () => {
278 |         context.save();
279 |         context.strokeStyle = END_POINT_STROKE_STYLE;
280 |         context.fillStyle = END_POINT_FILL_STYLE;
281 | 
282 |         drawEndPoint(0);
283 |         drawEndPoint(1);
284 | 
285 |         context.stroke();
286 |         context.fill();
287 |         context.restore();
288 |     };
289 | 
290 |     let drawControlAndEndPoints = () => {
291 |         drawControlPoints();
292 |         drawEndPoints();
293 |     };
294 | 
295 |     let cursorInEndPoint = (loc) => {
296 |         var pt;
297 | 
298 |         endPoints.forEach(function (point) {
299 |             context.beginPath();
300 |             context.arc(point.x, point.y,
301 |                 CONTROL_POINT_RADIUS, 0, Math.PI * 2, false);
302 | 
303 |             if (context.isPointInPath(loc.x, loc.y)) {
304 |                 pt = point;
305 |             }
306 |         });
307 | 
308 |         return pt;
309 |     };
310 | 
311 |     let cursorInControlPoint = (loc) => {
312 |         var pt;
313 | 
314 |         controlPoints.forEach(function (point) {
315 |             context.beginPath();
316 |             context.arc(point.x, point.y,
317 |                 CONTROL_POINT_RADIUS, 0, Math.PI * 2, false);
318 | 
319 |             if (context.isPointInPath(loc.x, loc.y)) {
320 |                 pt = point;
321 |             }
322 |         });
323 | 
324 |         return pt;
325 |     };
326 | 
327 |     let updateDraggingPoint = (loc) => {
328 |         draggingPoint.x = loc.x;
329 |         draggingPoint.y = loc.y;
330 |     };
331 | 
332 |     //事件
333 | 
334 | 
335 |     canvas.onmousedown = (e) => {
336 |         //获取当前位置
337 |         let loc = windowToCanvas(e.clientX,e.clientY);
338 |         e.preventDefault();
339 | 
340 |         if (!editing){
341 | 
342 |             saveDrawingSurface();
343 |             mousedown.x =loc.x;
344 |             mousedown.y = loc.y;
345 |             updateRubberbandRectangle(loc);
346 |             dragging=true;
347 |         }
348 |         else{
349 |             draggingPoint = cursorInControlPoint(loc);
350 |             if (!draggingPoint){
351 | 
352 |                 draggingPoint=cursorInEndPoint(loc);
353 |             }
354 |         }
355 |     };
356 |     canvas.onmousemove=e=>{
357 | 
358 |         let loc = windowToCanvas(e.clientX,e.clientY);
359 |         if (dragging||draggingPoint){
360 |             e.preventDefault();
361 |             restoreDrawingSurface();
362 |             if (guidewires){
363 |                 drawGuidewires(loc.x,loc.y);
364 |             }
365 |         }
366 |         if (dragging) {
367 |             updateRubberband(loc);
368 |             drawControlAndEndPoints();
369 |         }
370 |         else if (draggingPoint) {
371 |             updateDraggingPoint(loc);
372 |             drawControlAndEndPoints();
373 |             drawBezierCurve();
374 |         }
375 |     };
376 | 
377 |     canvas.onmouseup=e=>{
378 |         let loc = windowToCanvas(e.clientX,e.clientY);
379 | 
380 |         restoreDrawingSurface();
381 | 
382 |         if (!editing) {
383 |             updateRubberband(loc);
384 |             drawControlAndEndPoints();
385 |             dragging = false;
386 |             editing = true;
387 |             if (showInstructions) {
388 |                 instructions.style.display = 'inline';
389 |             }
390 |         }
391 |         else {
392 |             if (draggingPoint) drawControlAndEndPoints();
393 |             else editing = false;
394 | 
395 |             drawBezierCurve();
396 |             draggingPoint = undefined;
397 |         }
398 |     }
399 | 
400 |     // 给控件添加监听
401 | 
402 |     eraseAllButton.onclick = ()=> {
403 |         context.clearRect(0, 0, canvas.width, canvas.height);
404 |         drawGrid(GRID_STROKE_STYLE, GRID_SPACING, GRID_SPACING);
405 | 
406 |         saveDrawingSurface();
407 | 
408 |         editing = false;
409 |         dragging = false;
410 |         draggingPoint = undefined;
411 |     };
412 | 
413 |     strokeStyleSelect.onchange = ()=>{
414 |         context.strokeStyle = strokeStyleSelect.value;
415 |     };
416 | 
417 |     guidewireCheckbox.onchange = ()=> {
418 |         guidewires = guidewireCheckbox.checked;
419 |     };
420 | 
421 |     // 给介绍框添加监听
422 | 
423 |     instructionsOkayButton.onclick = ()=> {
424 |         instructions.style.display = 'none';
425 |     };
426 | 
427 |     instructionsNoMoreButton.onclick = ()=> {
428 |         instructions.style.display = 'none';
429 |         showInstructions = false;
430 |     };
431 | 
432 |     // 初始化
433 | 
434 |     context.strokeStyle = strokeStyleSelect.value;
435 |     drawGrid(GRID_STROKE_STYLE, GRID_SPACING, GRID_SPACING);
436 | 
437 | </script>
438 | </html>


--------------------------------------------------------------------------------