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