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" 类型来显示

 <!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) 在给定的矩形内清除指定的像素。

 <!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>

路径方法
  • 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专题-线条样式的更多相关文章

  1. canvas设置线条样式

    canvas设置线条样式 合法属性和方法 lineWidth = value 设置线宽 lineCap = type 设置线端点样式 lineJoin = type 设置线交合处样式 setLineD ...

  2. HTML5 canvas 中的线条样式

    线条样式属性 lineCap        设置或返回线条的结束端点样式 butt         默认.向线条的每个末端添加平直的边缘. round         向线条的每个末端添加圆形线帽. ...

  3. canvas学习笔记（中篇） -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理

    [中篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  4. 8-23 canvas专题

    8-23 canvas专题-了解外部框架的使用 学习要点 掌握画布内容的导出的toDataURL()方法 了解外部框架的使用 第八章内容介绍 在第八章中我们将对以前的知识进行简单的回顾,着重对canv ...

  5. HTML5 canvas绘制线条曲线

    HTML5 canvas入门 线条例子 1.简单线条 2.三角形 3.填充三角形背景颜色 4.线条颜色以及线条大小 5.二次贝塞尔曲线 6.三次贝塞尔曲线 <!doctype html> ...

  6. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  7. 8-13 canvas专题-阶段练习二（下)

    8-13 canvas专题-阶段练习二(下) <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...

  8. 8-12 canvas专题-阶段练习一（上）

    8-12 canvas专题-阶段练习一(上) <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...

  9. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

随机推荐

  1. mac apache 配置

    mac系统自带apache这无疑给广大的开发朋友提供了便利,接下来是针对其中的一些说明 一.自带apache相关命令 1. sudo apachectl start 启动服务,需要权限,就是你计算机的 ...

  2. poj 1088 滑雪 DP（dfs的记忆化搜索）

    题目地址:http://poj.org/problem?id=1088 题目大意:给你一个m*n的矩阵 如果其中一个点高于另一个点 那么就可以从高点向下滑 直到没有可以下滑的时候 就得到一条下滑路径 ...

  3. *lucene索引_创建_域选项

    [索引建立步骤] [创建Directory] [创建writer] [创建文档并添加索引] 文档和域的概念很重要 文档相当于表中的每一条记录,域相当于表中的每一个字段. [查询索引的基本信息] 使用I ...

  4. Git和SVN共存的方法

    刚工作的时候都是用的cvs和svn,对git不熟悉,随着工作的需要,打分支和版本管理的需要,熟悉起来了git,这一用不可收拾,比svn远远好用,尤其是版本分支管理上,切换分支的方便性,现在这家公司还是 ...

  5. 【转】Java的path,classpath,java_home环境变量的配置与具体含义

    对于一个Java初学者来说,第一步要做的是安装jdk并配置环境变量,一般按照书上或者网上的步骤,一步步照着做就行了,但是对于初学者来说,很多问题没有解决,比如为什么很多配置方法各不相同,却都能够配置成 ...

  6. 【数轴涂色+并查集路径压缩+加速】C. String Reconstruction

    http://codeforces.com/contest/828/problem/C [题意] [思路] 因为题目保证一定有解,所有优化时间复杂度的关键就是不要重复染色,所以我们可以用并查集维护区间 ...

  7. 整体二分初识--POJ2104：K-th Number

    n<=100000个数有m<=5000个询问,每次问区间第k大. 方法一:主席树!…… 方法二:整体二分. 整体二分一次性计算半个值域对一个区间的询问的贡献,然后根据“这半边的贡献在某个询 ...

  8. c#中的委托和事件详细学习【分6页学习】

    原文发布时间为:2008-11-01 -- 来源于本人的百度文章 [由搬家工具导入] 在本文中我首先通过一个GreetingPeople的小程序向大家介绍了委托的概念、委托用来做什么，随后又引出了事件 ...

  9. 从零开始写STL-内存部分-内存分配器allocator

    从零开始写STL-内存部分-内存分配器allocator 内存分配器是什么? 一般而言,c++的内存分配和释放是这样操作的 >>class Foo{ //...}; >>Foo ...

  10. AOJ731（不等式）

    题意:有n(n<=100)个石头,每个石头的价值在Ai~Bi(1<=Ai<=Bi<=10000)之间,将这些石头分给两个人,求两个人的最大总价值差的最小值 分析: 与一般的求最 ...