HTML新特性--canvas绘图-文本

一、html5新特性--canvas绘图-文本(重点)

#常用方法与属性

  -ctx.strokeText(str,x,y);   绘制描边文字(空心)

  str:绘制文本

  x,y:字符串左上角位置(以文本基线为准)

  -ctx.fillText(str,x,y);       绘制填充文字(实心)

  -ctx.font="19px SimHei";  前面文本大小/字体

  -ctx.textBaseline = "top";  调整文本基线[top/alphabetic/bottom]

二、HTML5新特性--canvas绘图-路径 (重点)

路径:绘制不规则图形 (复杂)

      path:由多个坐标点组件任意图形,图形本身不可见

        可以描边或者填充

  -ctx.beginPath();   开始一条新路径(上一条路径结束)

  -ctx.moveTo(x,y);   移动到指定点(x,y)

  -ctx.lineTo(x,y);     从当前点到指定点绘制一条直线(x,y)

  -ctx.stroke();       描边

  -ctx.fill();          填充

  -ctx.closePath();    闭合一条路径(结束点到开始点画一条直线)

  -ctx.arc(cx,cy,r,start,end);     绘制一条圆拱形

  cx,cy  圆心位置(x,y)

  r     半径

  start  开始角度

  end   结束角度

  #参数start,end 不使用常用角度完成设置，使用弧度设置

  #角度 0~360    弧度0~2PI

  #采用角度转换弧度    90角度*Math.PI/180=弧度

三、HTML5新特性--canvas绘图-图像 (重点)

  #?图片可以使用img标准显示网页为什么用canvas[复杂]

  #?图片位置:一个软件项目所有图片保存服务器

   (1)图片版权

   (2)图片数量巨大

  #操作过程将图片绘制canvas画布上

   (1)创建图像对象            p3 = new Image();

   (2)下载图像                p3.src = "p3.png"; //2ms

   (3)为图片绑定事件下载成功  p3.onload = function(){...}

   (4)绘制图片                ctx.drawImage(p3,x,y)

   (4)绘制图片                ctx.drawImage(p3,x,y,w,h)

   #p3  图片对象

   #x,y  图片或者文本或者图片左上角位置(原始大小图片)

   #w,h 图片宽度和高度(拉伸)

  

 四、HTML5新特性--canvas绘图-变形 (重点)

  canvas绘制时对图片进行旋转操作

  -rotate(deg)         旋转

   (1)旋转画笔对象

   (2)旋转轴心在画布原点

   (3)旋转角度会有累加操作

   (4)deg不同角度弧度

  -translate(x,y)      移动原点(移动轴心)到指定位置

  #原则:什么时候使用如下两个方法

  #当画布上绘制一个以上元素时必须使用下面方法

  -save()            保存画笔状态(原点;角度;颜色;...)

  -restore()          恢复到画笔保存时状态(原点;角度;颜色;..)

  #画图时:如果画布中有多个(一个以上)元素,画之前先保存状态

  #画之后恢复状态(元素之间不会受到影响)

五、HTML5新特性--canvas绘图-变形 (弹幕)

  #弹幕:专业视频网站常用功能

        当用户在观看视频希望(参与感)发表自己想法

        情绪/观点

        发表内容转文字浮动视频上方

  #理解用户操作

    (1)输入文字 修改文字大小;修改文字颜色

    (2)用户点击"发送按钮" 将内容显示视频上方

  #(#)项目工作流程!!!

    (1)遇到问题:如果发送文字过多效率有一定影响

    解决方案:池子

  

    (2)创建程序结构

    当设计大规则项目采用方式:

    单一原则(一个程序完成一种任务)

    #第一个程序:index.html  

     (1)创建元素 显示视频 画布

     (2)加载其它 js

    #第二个程序:msg.js 完成所有弹幕任务(一家餐厅)

    #第三个程序:main.js 项目入口程序:调用msg.js 方法(大楼主管)

 

六、6.1 HTML5新特性-- -变形 (弹幕)-index.html

    (1)视频元素：video     #底层 z-index:0

    (2)画布元素:  canvas   #上层  z-index:1

    (3)创建输入区域  

      [输入文字区域;文字大小下拉列表;文字颜色下拉列表;发送按钮]

    (4)加载main.js 文件(主管)

    (5)加载msg.js  文件(一家餐厅)

6.2  HTML5新特性-- -弹幕需要数据--msg

     (1)每一个弹幕中文字需要位置(x,y)

     (2)每一个弹幕中文字(m)

     (3)每一个弹幕中文字颜色(color)

     (4)每一个弹幕中文字大小(font)

     (5)每一个弹幕中文字速度(spd)

     (6)每一个弹幕中文字(状态 alive true 显示 false 隐藏)

     (7)100个弹幕

 

6.3  HTML5新特性-- -程序调用流程

    -msg.js 所有与弹幕相关数据函数

    #节省内存(原型)

     (1)创建弹幕构造函数   var msgObj = function(){}

       x,y,m,color,font,spd..

     (2)创建弹幕初始化函数 msgObj.prototype.init = function(){}

       给x,y,m,color,font,spd 赋初始值(开始之前值)

     (3)创建弹幕绘制函数   msgObj.prototype.draw = function(){}

       依据上面x,y,..把弹幕绘制画布上

 

    -main.js 负责创建弹幕对象并且调用相关函数

      function game(){

         init();

         gameloop();

       }

      function init(){

        负责创建弹幕对象并且调用init方法

        msg = new msgObj();

        msg.init();

       }

      function gameloop(){

        创建定时器调用gameloop

        msg.draw();

      }

      document.body.onload = game;

    -index.html