8-2 canvas专题-线条样式

学习要点

对第五章知识进行简单的回顾和总结
进一步讲解canvas绘图相关的知识点

第八章内容介绍

在第八章中我们将对以前的知识进行简单的回顾，着重对canvas绘图和简单动画做进一步讲解；
将对音频视频做进一步的讲解；
将介绍其他HTML5的新增功能比如拖放本地存储等。

线条样式

绘制直线，第五章知识简单回顾
lineWidth 设置或返回当前的线条宽度，单位为像素
lineCap 设置或返回线条的结束端点样式
1. butt 默认。向线条的每个末端添加平直的边缘。
2. round 向线条的每个末端添加圆形线帽。
3. square 向线条的每个末端添加正方形线帽。
  "round" 和 "square" 会使线条略微变长。
lineJoin 设置或返回两条线相交时，所创建的拐角类型
1. miter 默认。创建尖角。
2. bevel 创建斜角。
3. round 创建圆角。
miterLimit 设置或返回最大斜接长度。
斜接长度指的是在两条线交汇处内角和外角之间的距离。该属性定义了斜连线长度和线条宽度的最大比率
1. 只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。
2. 边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用 miterLimit 属性。
3. 如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示

8-2 canvas专题-线条样式-LMLPHP

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>8-1</title>

 </head>

 <body>

     <canvas id="canvas" width="500" height="300" style="background: #A9A9A9">

         很抱歉，您的浏览器暂不支持HTML5的canvas

     </canvas>

     <canvas id="canvas2" width="500" height="300" style="background: #A9A9A9">

         很抱歉，您的浏览器暂不支持HTML5的canvas

     </canvas>

     <canvas id="canvas3" width="500" height="300" style="background: #A9A9A9">

         很抱歉，您的浏览器暂不支持HTML5的canvas

     </canvas>

     <script type="text/javascript">

         var canvas=document.getElementById('canvas'); //获取canvas对象

         var cxt=canvas.getContext('2d');  //设置2d绘图环境

         //注：getContext是HTML5的内置对象，系统在其中封装了绘制基本图形的方法

         cxt.lineWidth=8;

         cxt.strokeStyle='green';

         cxt.moveTo(30,30);

         cxt.lineTo(400,30);

         cxt.lineTo(400,150);

         cxt.closePath()

         cxt.stroke();

     </script>

     <script type="text/javascript">

     //线帽(结束端点)

         var canvas2=document.getElementById('canvas2');

         var cxt2=canvas2.getContext('2d');

         cxt2.lineWidth=28;

         cxt2.beginPath();

         cxt2.lineCap="butt";

         cxt2.strokeStyle='orange';

         cxt2.moveTo(30,30);

         cxt2.lineTo(300,30);

         cxt2.stroke();

         cxt2.beginPath()

         cxt2.lineCap="round";

         cxt2.strokeStyle='green';

         cxt2.moveTo(30,90);

         cxt2.lineTo(300,90);

         cxt2.stroke();

         cxt2.beginPath();

         cxt2.lineCap="square";

         cxt2.strokeStyle='orange';

         cxt2.moveTo(30,150);

         cxt2.lineTo(300,150);

         cxt2.stroke();

     </script>

     <script type="text/javascript">

     //拐角类型

         var canvas=document.getElementById('canvas3');

         var cxt=canvas.getContext('2d');

         cxt.lineWidth=18;

         // cxt.lineJoin='miter'

         // cxt.lineJoin='round'

         cxt.lineJoin='bevel'

         cxt.miterLimit=

         cxt.strokeStyle='green';

         cxt.moveTo(80,30);

         cxt.lineTo(400,30);

         cxt.lineTo(400,120);

         cxt.closePath()

         cxt.stroke();

     </script>

 </body>

 </html>

矩形

rect(x,y,w,h) 创建矩形。
fillRect(x,y,w,h) 绘制"被填充"的矩形。
strokeRect(x,y,w,h) 绘制矩形（无填充）。
clearRect(x,y,w,h) 在给定的矩形内清除指定的像素。

8-2 canvas专题-线条样式-LMLPHP

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>8-3 课堂演示</title>

 </head>

 <body>

     <canvas id="canvas" width="600" height="400" style="background: #A9A9A9">

         很抱歉，您的浏览器暂不支持HTML5的canvas

     </canvas>

     <br><input type="button" value="清空画布" onclick="clearCanvas()">

     <script type="text/javascript">

         var c=document.getElementById("canvas");

         var ctx=c.getContext("2d");

         ctx.lineWidth=5

         ctx.fillStyle = "red"

         ctx.strokeStyle = "green"

         ctx.strokeRect(100,100,200,200);

         ctx.fillRect(125,125,150,150);

         function  clearCanvas(){

             ctx.clearRect(0,0,600,400)

         }

     </script>

 </body>

 </html>

8-2 canvas专题-线条样式-LMLPHP

fill()填充当前绘图（路径）
stroke()绘制已定义的路径
moveTo()把路径移动到画布中的指定点，不创建线条
lineTo()添加一个新点，然后在画布中创建从该点到最后指定点的线条
开启和关闭路径
beginPath()起始一条路径，或重置当前路径
closePath()创建从当前点回到起始点的路径
绘制圆弧
arc()创建弧/曲线（用于创建圆形或部分圆）
arcTo()创建两切线之间的弧/曲线
clip()从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()创建二次贝塞尔曲线
bezierCurveTo()创建三次方贝塞尔曲线
isPointInPath()如果指定的点位于当前路径中，则返回 true，否则返回 false

-->

颜色、样式和阴影

fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
阴影
1. shadowColor 设置或返回用于阴影的颜色
2. shadowBlur 设置或返回用于阴影的模糊级别
3. shadowOffsetX 设置或返回阴影距形状的水平距离
4. shadowOffsetY 设置或返回阴影距形状的垂直距离
渐变
1. createLinearGradient() 创建线性渐变（用在画布内容上）
2. createPattern() 在指定的方向上重复指定的元素
3. createRadialGradient() 创建放射状/环形的渐变（用在画布内容上）
4. addColorStop() 规定渐变对象中的颜色和停止位置

文本

font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线
clearRect(x,y,w,h) 在给定的矩形内清除指定的像素。
fillText() 在画布上绘制“被填充的”文本
strokeText() 在画布上绘制文本（无填充）
measureText() 返回包含指定文本宽度的对象

线条

8-2 canvas专题-线条样式

8-2 canvas专题-线条样式

学习要点

绘制圆弧