1.Canvas的使用注意  A.要在页面中添加一对canvas标记,默认占300*150的区域  B.我们可以通过html属性‘width’,‘height’来设置canvas的宽高,不可以通过css属性来设置宽高。  C.Canvas相当于是一张白纸,如果想要在这个白纸上绘图,你需要一套绘图工具   获取绘图工具的方式:var ctx = Canvas.getContext('2d');

练习:

2.Canvas绘制会用到的方法  ctx.moveTo(x,y):将绘图工具移动到x,y坐标点  ctx.lineTo(x,y):将绘图工具从上一个点到x,y点虚描一条线    ctx.stroke():将虚描的内容使用实线绘制出来。  ctx.fill();在绘制好的图形中填充颜色(默认黑色).                    fill会将起始点(moveTo)和结束点(最后一个lineTo)连起来,然后在形成的图形中填充黑色。  ctx.closePath():将绘图的起始点绘图的结束点进行连接,最后闭合图形。  ctx.beginPath():开启新路径。  ctx.setLineDash([数组]) :设置虚线的数组,当划线的时候采用这个数组中的数字作为虚线的数据   ctx.getLineDash():获取虚线的数组

Canvas绘制使用到的属性:  ctx.lineWidth = 10;  设置绘图的线宽  ctx.lineCap = "round";  设置线帽  ctx.lineJoin = 'round';  设置线拐  ctx.lineDashOffset = 值;  设置虚线的缩进   ctx.strokeStyle = 'red';  设置描边的颜色  ctx.fillStyle ='green'; 设置填充的颜色

3.非零环绕原则:如果想要对一块区域进行填充,我们需要使用非零环绕原则来判断是否进行填充   在这一块区域随便选一个点,随便向任意方向拉出去到外面的一个L线,   此时如果画的图的线条穿过L线时是顺时针的,那么就记做+1   此时如果画的图的线条穿过L线时是逆时针的,那么就记做-1   最后把所有记录的值进行求和,如果为0,代表不填充,其他情况要填充。

4.线宽的问题:Canvas在进行绘制线条的时候,如果线宽只要奇数值都会去做取消锯齿,比如说lineWidth设置为9,中心很黑的芯就是8px,两边各1px的淡淡的灰色的模糊边缘。 线宽的中心才是线的起始位置

5.closePath  和 lineTo进行闭合的区别: closePath进行图形的闭合会是完美闭合, lineTo进行图形的闭合的时候,如果线宽比较宽的情况下,看起来就有问题。

结论:以后如果要闭合图形请使用closePath();

6.开启新路径:绘图的时候会设置线宽,线颜色,填充,划线, 如果想要有多个状态的图形存在,我们必须开启新路径。 先画一个填充的图形  fill()

开启新路径; 然后又画一个线条图形  stroke();

7.如何使用面向对象的方式进行编程:  (1).找找看有没有系统对象或者第三方库可以帮助你完成功能  (2).如果没有,那么我们需要自己来创建这样一个对象来完成这个功能   A.想要创建这个对象,先要创建这个对象的构造函数   B.通过构造函数的参数我们把对象需要使用到的数据传递,赋值给对象   C.把我们需要实现的功能设置为原型的方法,这样的话,所有构造函数创建出来的对象都有这个功能方法了。   D.new 一个对象,调用对象的功能方法完成功能。

————————————————————————————————————————

1. 什么是 Canvas  就是 HTML 5 给出的一个可以展示绘图内容的标签.  最早是 苹果公司 提出的该标签.

threejs.org 里面有汽车等 3D 的仿真

2. 基本使用  1> 提供 Canvas 标签即可. 默认就会占据 300 * 150 的区域  2> 利用 html 属性为它设置宽高. 不要使用 CSS 来设置.   使用 属性设置 canvas 标签的宽高, 实际上相当于增加了 canvas 画布的像素   但是如果使用 CSS 来设置画布的大小, 那么不会增加像素点, 只是将像素扩大了  3> Canvas 只能展示绘图的内容. 但是不能进行绘图   利用 Canvas 找到绘图工具   每一个 Canvas 都有一套工具, 利用工具可以在当前 Canvas 上进行绘图   使用语法 canvas.getContext( '2d' ) 就返回一个在当前画布上绘图的工具集   这个工具集专门绘制 平面图形. 如果要绘制 立体的图形需要传入 'webgl'   绘制 平面图形的 对象是 CanvasRenderingContext2D 类型的  4> 开始绘图   首先需要绘制点, 然后需要将这些点描边吗才可以看到东西

3. 绘图的坐标系    在绘图板上描述出下列点的位置

( 100, 100 ), ( 0, 100 ), ( 100, 0 ), ( -10, 100 ), ( 100, -10 )

4. 绘图的常用方法  ctx.moveTo( x, y ) 将绘图的起始点设置为 x,y  ctx.lineTo( x, y )  从当前位置, 绘制直线到 x,y  ctx.stroke()  就是将刚刚绘制的所有的点联系起来. 就可以看到图形了.

5. 绘制方法  ctx.stroke()  ctx.fill()  调用 fill 方法会将所有的点连接起来, 并构成一个封闭的图形结构      如果所有的描点没有构成封闭结构, 也会将开始的起点, 与最终的点      连接起来, 构成一个闭合的图形, 并在里面填充颜色(默认黑色)

6. 非零环绕原则  如果需要判断某一个区域是否需要填充颜色. 就从该区域中随机的选取一个点.  从这个点拉一条直线出来, 一定要拉到图形的外面. 此时以该点为圆心.  看穿过拉出的直线的线段. 如果是顺时针方向就记为 +1, 如果是 逆时针方向,  就记为 -1. 最终看求和的结果. 如果是 0 就不填充. 如果是 非零 就填充.

7. 闭合路径  closePath()

lineWidth 设置绘制图形的线宽

closePath 与 直接使用 lineTo 闭合是有区别的

8. Canvas 中绘图是有状态的  背景  粉色  正方形  红色  边框 蓝色

Canvas 绘图是含有状态的, 在需要改变颜色, 绘制方法, 改变一些属性... 就需要  改变绘图状态. 使用 beginPath() 方法. 开启一个新的路径.

9. 虚线  ctx.setLineDash( 数组 )  ctx.getLineDash()  ctx.lineDashOffset = 值

数组中存储的数字就是分别表示 实线部分与空白部分的长度 [ 10 ]

10. 如何设置描边与填充的颜色  ctx.strokeStyle  设置描边的颜色  ctx.fillStyle  设置填充的颜色

11. 将直线进行封装  function Line () {}

var line = new Line( x0, y0, x1, y1 );   line.stroke();

————————————————————————————————————————————

1. 绘制折线图  假设有点: ( 10, 20 ), ( 15, 13 ), ( 17, 30 ), ( 30, 10 ), ( 20, 15 )  将这些点绘制到坐标轴中.

2. 绘制形状  -> 矩形   ctx.rect( x, y, width, heigth )  描边, 需要 stroke 或 fill   ctx.strokeRect( x, y, w, h )   ctx.fillRect( x, y, w, h )   ctx.clearRect( x, y, w, h )   清除该矩形区域的内容

-> 清除整个画布   ctx.clearRect( 0, 0, cas.width, cas.height );

cas.width = cas.width;

-> 圆弧   ctx.arc( x, y, r, startAngle, endAngle, clockwise )   ctx.arcTo() 了解

3. 弧度制  为了更好的计算角度, 我们该角度提供一个新的定义, 用 PI 作为单位  将单位圆的一个整圈( 360 度 )记作 2 倍 的 PI.

这样的度量表示就是弧度制的表示方法.

60 度 PI / 3  45 度 PI / 4  30 度 PI / 6

学会进行转换

2 PI 刚好是一圈  一圈又是 360 度

2 PI 比上 360 度 = 弧度 比上 对应的角度

angle 角度  radian 弧度

function toAngle ( radian ) {   return radian * 180 / Math.PI;  }  function toRadian ( angle ) {   return angle * Math.PI / 180;  }

4. 角度的坐标  水平向右的角度是 0 度, 或 0 弧度  顺时针是正方向, 逆时针是负方向

练习: 绘制出, 圆心在 canva 正中心, 半径为 100, 角度从 -60度 到 120 度的圆弧

5. 如果没有当前位置, 绘制圆弧是没有任何问题  但是如果有了当前位置, 绘制圆弧的时候会将当前位置连接到圆弧上

6. 计算在圆弧上的点的坐标

7. 根据固定到起始点到 圆心, 结合圆弧和 closePath 方法可以绘制扇形( 楔形 Wedge)

8. 动态的通过动画, 一点一点的添加角度, 然后绘制一整个圆

9. 绘制文字  ctx.fillText( 文本内容, x, y )  ctx.strokeText( 文本内容, x, y );

常用的属性  ctx.font = '30px 黑体'

ctx.textAlign  left, center, right. start, end  ctx.textBaseline top, middle, bottom. hanging, ideographics, alphabetic

ctx.measureText( 文本 )  获取当前文字的字体设置下, 文字的宽度对象

——————————————————————————————————————

1. 图片绘制  ctx.drawImage()  有三种调用形式  1> ctx.drawImage( img, x, y ) 将 image 绘制到 x, y 表示的位置  2> ctx.drawImage( img, x, y, width, height ) 将 img 绘制到一个矩形区域内  3> ctx.drawImage( img, sx, sy, sw, sh, x, y, w, h )   将图片 img 的 sx, sy, sw, sh 部分的内容绘制到画布的   x, y, w, h 的矩形区域内.

2. 计时器模型  var id = setInterval(function () {

if ( 条件 ) {

clearInterval( id );   }

// 继续执行我的内容

}, 20);

3. 变换的概念  计算机绘图是利用坐标进行绘图. 绘制任何图形都和坐标系的结构息息相关.

所谓的变换就是一套数学公式, 可以记录坐标轴的变化方式.  利用坐标轴的变换可以绘制出, 根据不同坐标轴特点而形成的图形.

基本的 api  ctx.translate()  平移变换  ctx.rotate()  旋转变换  ctx.scale()   伸缩变换

4. 封装绘图对象  Line  Rect  Circle x, y, radius, strokeStyle, fillStyle, lineWidth  Arc

function Line( config ) {

}  Line.prototype = {   stroke: function () {

}  }

5. canvas 的状态  在 Canvas 中凡是设置了属性效果, 都会延续到后面一次修改  Canvas 在创建出来的时候, 是有一个默认的状态的  我希望每次修改状态的时候 都是不影响原来默认状态的  每次画完图时, 我都会新建一个状态, 然后绘制完成后  恢复到原有状态

ctx.save()  将当前状态保存  ctx.restore()  将保存的状态恢复

状态栈

6. 在 canvas 绘制的时候允许使用 canvas 绘制 canvas    ctx.darwImage( img, ... )

此时 img 可以是 图片, 还可以是 canvas, 甚至是 video

7. Konva 是一个完全面向对象的框架  将所有的东西都看做是对象: 图片, 直线, 矩形, ...  将整个canvas看做成舞台(stage)  在舞台上放一个层, 那么将所有的图形放在这个层中

命名空间

var num = 123;  function foo() {}  // 污染全局作用域  var Itcast = {};

Itcast.num = 123;  Itcast.foo = function () {};

canvas入门笔记的更多相关文章

  1. Canvas入门笔记-实现极简画笔

    今天学习了Html5 Canvas入门,已经有大神写得很详细了http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#8 在学习过后 ...

  2. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  3. ES6入门笔记

    ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...

  4. [Java入门笔记] 面向对象编程基础(二):方法详解

    什么是方法? 简介 在上一篇的blog中,我们知道了方法是类中的一个组成部分,是类或对象的行为特征的抽象. 无论是从语法和功能上来看,方法都有点类似与函数.但是,方法与传统的函数还是有着不同之处: 在 ...

  5. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  6. redis入门笔记(2)

    redis入门笔记(2) 上篇文章介绍了redis的基本情况和支持的数据类型,本篇文章将介绍redis持久化.主从复制.简单的事务支持及发布订阅功能. 持久化 •redis是一个支持持久化的内存数据库 ...

  7. redis入门笔记(1)

    redis入门笔记(1) 1. Redis 简介 •Redis是一款开源的.高性能的键-值存储(key-value store).它常被称作是一款数据结构服务器(data structure serv ...

  8. OpenGLES入门笔记四

    原文参考地址:http://www.cnblogs.com/zilongshanren/archive/2011/08/08/2131019.html 一.编译Vertex Shaders和Fragm ...

  9. OpenGLES入门笔记三

    在入门笔记一中比较详细的介绍了顶点着色器和片面着色器. 在入门笔记二中讲解了简单的创建OpenGL场景流程的实现,但是如果在场景中渲染任何一种几何图形,还是需要入门笔记一中的知识:Vertex Sha ...

随机推荐

  1. CentOS7 安装 hbase1.3.3

    1. 集群规划 ip地址 机器名 角色 192.168.1.101 palo101 hadoop namenode, hadoop datanode, yarn nodeManager, zookee ...

  2. C#语言,求成绩平均数。

    输入大于五的人数成绩,去掉两个最高分,和两个最低分,求其平均数. Console.Write("请输入人数"); int renshu = int.Parse(Console.Re ...

  3. Html5——视频标签使用

    video标签: 上面的例子使用一个 Ogg 文件,适用于Firefox.Opera 以及 Chrome 浏览器.要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型.video 元素 ...

  4. scrapy框架之分布式操作

    分布式概念 分布式爬虫: 1.概念:多台机器上可以执行同一个爬虫程序,实现网站数据的分布爬取. 2.原生的scrapy是不可以实现分布式爬虫? a)调度器无法共享 b)管道无法共享 3.scrapy- ...

  5. 使用Handlerf发送消息或使用Handler轮询时,报错IllegalStateException:This message is already in use.;

    java.lang.IllegalStateException: { when=-107ms what=9 obj=com.saicmaxus.maxuslife.model.CarInfo@be47 ...

  6. Guava实现 过滤文本,排序,转换内容,分组计数转换map 等等

    重要点 :看注释 从access.log中统计数据 对healthcheck.html的请求不计入统计 输出请求总量,以及GET和POST分别的总量 输出请求最频繁的10个接口及其次数,按次数降序 输 ...

  7. js样式之渐变线

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. DRF 视图组件代码

    序列化器代码 # 声明序列化器from rest_framework import serializersfrom djangoDome.models import Book class Publis ...

  9. Certbot免费https证书

    安装https 获取certbot客户端 wget https://dl.eff.org/certbot-auto chmod a+x certbot-auto 停止nginxyunx service ...

  10. html5本地存储技术 localstorage

    html在使用的时候,例如在input框里面,用户输入信息的时候,一点提交信息就开始向后天交互 但是一刷新或者用户再打开一个新的网页又得重新输入,这就牵扯到本地存储的问题 LocalStorage,是 ...