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 方法(大楼主管)

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

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

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

(3)创建输入区域

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

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

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

原文地址:https://www.cnblogs.com/sna-ling/p/12398978.html

时间: 2024-10-26 01:41:31

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

Html5新特性 <canvas>画板画直线

 下面例子为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

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

相对于canvas绘图,SVG是一种绘制矢量图的技术.全称叫做Scalable Vector Graphics,可缩放的矢量图,在2000年就已经存在,H5把它纳入了标准标签库,并进行了一些瘦身.需要注意的是,SVG图形的属性不属于HTML DOM标准,需要用核心DOM的方法来操作:SVG的样式可以用css,但是只能用其专有的属性:如果要使用js动态生成SVG其中的元素,创建方法得用document.createElementNS('http://www.w3.org/2000/svg','标签

Html5新特性 &amp;lt;canvas&amp;gt;画板画直线

 以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

h5新特性

  CSDN博客 Gane_Cheng HTML5新特性浅谈 发表于2016/10/17 21:25:58  7809人阅读 分类: 前端 转载请注明出处: http://blog.csdn.net/gane_cheng/article/details/52819118 http://www.ganecheng.tech/blog/52819118.html (浏览效果更好) 2014年10月29日,W3C宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成. HTML5将会取代

HTML5新特性

1.HTML5简介 在之前一直使用的是HTML 4.0标准,而且一直到现在为止,HTML4.0依然作为整个行业的最广泛的使用标准.所谓的HTML5指的就是HTML的第5.0版本,但是对于HTML 5.0标准基本上是让人觉得期待了很久.而且对于HTML5技术与传统的HTML 4最大的差别在于移动端的支持上.例如,在HTML 5之中支持了GPS的取得(可以取得当前移动端的经度和纬度两个信息),那么就可以轻松的实现定位的需要,当然,这一切的操作都必须有一个前提:浏览器要支持.到现在为止一直制约HTML

HTML5_01之表单新特性

1.WebStorm快捷键: Ctrl+Alt+(向下方向键):快速复制当前行 Alt+(向上/下方向键):移动当前行 Ctrl+D:删除当前行 Ctrl+/:快速(取消)注释当前行 Ctrl+Alt+L:格式化当前文档2.HTML5九大新特性: ①表单新特性.②视频音频.③Canvas绘图.④SVG绘图.⑤地理定位.⑥拖放API.⑦WebWorker.⑧WebStorage.⑨WebSocket3.表单Input类型: ①已有type类型:  text(文本框).password(密码框).r

HTML5与CSS3的新特性

一.HTML5新特性 1.视频 在HTML5之前,网络上的视频大多都是使用Flash插件进行播放的,保险现在也仍然有很多.HTML5规定了一种通过video元素包含视频的标注方法. 视频格式的支持: 格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的

HTML5新特性及详解

什么是HTML5:HTML5 是下一代的HTML,将成为 HTML.XHTML 以及 HTML DOM 的新标准. 为 HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 JavaScript. 减少对外部插件的需求(比如 Flash) 更优秀的错误处理 更多取代脚本的标记 HTML5 应该独立于设备 开发进程应对公众透明 HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新

HTML5新特性新增功能

HTML5 现如今已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 如:绘图canvas:用于媒介回放的video和audio元素:本地存储localStorage;语义化元素:表单控件等等新增的功能,都是HTML5新特性. 下面列举HTML5新特性详细说明: 一.新的文档类型  (New Doctype) 目前许多网页还在使用XHTML 1.0 并且要在第一行像这样声明文档类型: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1