一、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

HTML新特性--canvas绘图-文本的更多相关文章

  1. H5新特性-canvas绘图--渐变对象路径(最复杂)--图片--变形操作

    今天的目标 3.1:canvas绘图--(重点掌握:渐变对象.路径.图片.变形) 3.2:canvas绘图--渐变对象 线性渐变: linearGradient 径向渐变: var g = ctx.c ...

  2. H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图

    今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...

  3. html5新特性canvas绘制图像

    在前端页面开发过程中偶尔会有需要对数据进行相应的数学模型展示,或者地理位置的动态展示,可能就会想到用canvas,网上有很多已经集成好的,比如说类似echarts,确实功能非常强大,而且用到了canv ...

  4. ES6新特性--多行文本

    由于多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用` ... `表示: `这是一个 多行 字符串`;

  5. H5新特性-视频,音频-Flash-canvas绘图

    json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...

  6. Java7 新特性 数值文本表示法

    今天和大家分享下 java7中新特性-数值文本表示法 首先,在原来jdk1.6中 如果需要将一个二进制的数值转换成十进制的话,一般情况下都会以下面的代码方式去实现. public static voi ...

  7. HTML5 十大新特性(五)——SVG绘图

    相对于canvas绘图,SVG是一种绘制矢量图的技术.全称叫做Scalable Vector Graphics,可缩放的矢量图,在2000年就已经存在,H5把它纳入了标准标签库,并进行了一些瘦身.需要 ...

  8. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...

  9. H5新特性之canvas

    canvas无疑是H5之中最受欢迎的新特性了,它可以让浏览毫无费力的画出各种图案,动画. canvas的性能不会因为画布上的图案多少而改变,因此做动画用canvas性能也相当优秀. canvas最基本 ...

随机推荐

  1. atom 之 前端必备插件

    一. 语法支持 1. Language-label Ø ES2016.ESNext.JXS语法扩展 2. Language-postcss Ø Postcss语法高亮 二. 自动补全 1. Autoc ...

  2. Java程序员必备基础结构图

    前言 最近看了深入理解Java虚拟机第三版,整理了一些基础结构图,算是比较全的了,做一下笔记,大家一起学习. 1.Java虚拟机运行时数据区图 JVM内存结构是Java程序员必须掌握的基础. 程序计数 ...

  3. 解析HTML、JS与PHP之间的数据传输

    在电商网站搭建过程中,前端经常会向后端请求数据,有时候通过HTML.JS和PHP文件的处理来实现数据的连通.通常情况下,用户在HTML中做关键字操作,JS对提交的表单进行数据处理,向后端发起ajax请 ...

  4. Spring IOC 之注册解析的 BeanDefinition

    2019独角兽企业重金招聘Python工程师标准>>> DefaultBeanDefinitionDocumentReader.processBeanDefinition() 完成 ...

  5. 配置windows自动修改密码和自动登录

    日常运维多台服务器,每季度要修改一次密码,非常麻烦,现做一个VBS脚本,计划任务设置每季度第一天三点定时运行,则可解决该问题,具体实现脚本如下:autochg_pwd.vbs ystr=year(No ...

  6. Linux从入门到精通系列之NFS

    网络文件系统(NFS,Network File System)是一种将远程主机上的分区(目录)经网络挂载到本地系统的一种机制,通过对网络文件系统的支持,用户可以在本地系统上像操作本地分区一样来对远程主 ...

  7. Linked List-1

    链表一直是面试的重点问题,恰好最近看到了Stanford的一篇材料,涵盖了链表的基础知识以及派生的各种问题. 第一篇主要是关于链表的基础知识. 一.基本结构 1.数组回顾 链表和数组都是用来存储一堆数 ...

  8. python(格式化输出)

    一.%格式化输出 1.整数的输出(参照ASCII) %o —— oct 八进制 %d —— dec 十进制(digit ) %x —— hex 十六进制 >>> print('%o' ...

  9. Mysql 远程连接错误排查

    1. 测试本地与远程服务器端口能否连通 telnet  远程IP  端口号 telnet 192.168.1.1 3306 2.如果是在aliyun或者aws云服务器上自建数据库 2.1 在安全组里开 ...

  10. ELK+kafka日志收集分析系统

    环境: 服务器IP 软件 版本 192.168.0.156 zookeeper+kafka zk:3.4.14  kafka:2.11-2.2.0 192.168.0.42 zookeeper+kaf ...