作者:被爱的善良的小鸽_212 | 来源:互联网 | 2023-06-19 17:42
自从停博一段时间后,一直在思考特别是今年开年,在想学习什么技术做为未来的技术储备。本来想加强下Android 底层方面的知识,但觉得工作上跟这块有所涉及再学习的话有点懒,由于Windows Phone 7 开发工作上没有涉及,目前也算是入门,未来短时间内不会考虑将其应用于工作选择,故不做考虑。现选择了两个方向为:IOS和HTML5,手上的毛主席相对比较紧还没有买MAC,所以优先选择了HTML5先涉猎一下,以后再考虑精通或者再涉猎IOS,作为未来的技术储备。
关于HTML5的简介和推广者网上一大把资料这里就略过,直接进入主题。
在页面中加入HTML5->canvas
在HTML页面中插入canvas 元素非常直观。只要在HTML源码中插入canvas标签:
< canvas id ="diagonal" style ="border:1px solid;" width ="200" height ="200" > canvas > //带实心边框的canvas元素
请使用支持HTML5的浏览器浏览
在canvas中绘制一条对角线
步骤分为:
首先获得页面元素中的canvas对象: var canvas=document.getElementById('diagonal');
得到canvas的上下文 :var cOntext=canvas.getContext('2d');
通知canvas将要开始绘制一个新的图形:context.beginPath();
将当前的位置移动到新的目标坐标(x,y)。(不绘制):context.moveTo(0,0);
将当前位置移动到新的目标坐标(x,y),而且在两个坐标之间画一条直线:context.lineTo(140,70);
调用canvas根据上面的指示绘制图:context.stroke();
根据上面的步骤,编写的代码为:
DOCTYPE html >
< html >
< canvas id ="diagonal" style ="border:1px solid;" width ="200" height ="200" > canvas >
< script >
function drawDiagonal()
{
var canvas=document.getElementById('diagonal_line');// 获得canvas对象
var cOntext=canvas.getContext('2d'); // 获取canvas的 上下文
// 用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(0,0);// 将光标移动到x为0,y为0的地方开始准备从这里开始绘制
context.lineTo(140,70);// 绘制到x 坐标为140,y坐标为70的地方
// 将这条线绘制到canvas上
context.stroke(); // 只有调用stroke canvas 才会绘制图像显示结果
}
window.addEventListener("load",drawDiagonal,true );
script >
html >
效果如下例子:
注意: beginPath、moveTo、lineTo都不会直接修改canvas的展示结果。canvas中很多用于设置样式和外观的函数也同样不会直接修改显示结果。只有当对路径应用绘制(storke)或填充(fill)方法时,结果才会显示出来。否则,只有在显示图像、显示广本或者绘制、填充和清除矩形框的时候,canvas才会马上更新。
使用变换方法在canvas 上绘制对角线
这个方法较之上面的方法多了三个步骤:
首先先保存当前绘图状态save
再用平衡方法绘制上下文,使用translate
最后再绘图完毕后使用restore 恢复原有的绘图状态。
至于为什么要使用save和restore方法,演示完DEMO会讲述。变化方法绘制对角线的代码如下:
演示的DEMO如下:
使用canvas 的save 和 restore注意事项
分为两种情况:
如果你本身绘制的图可以一次性绘制完,那可以不使用save和restore
如果你绘制图绘制一次后,使用stroke或才fill 后,底下还需要再次做绘制的动作,那么使用save和restore 会更好,不会跟上次的画图冲突,得不到我们想要的效果。
几个简单的小例子,稍微了解了HTML5 的一些编写方式和它强悍的API,虽然目前还没有好用的IDE来编写HTML5应用或游戏,但随着HTML5一步步的来临,对它的未来应用非常有信心。
推荐阅读
本文详细介绍了Android中的坐标系以及与View相关的方法。首先介绍了Android坐标系和视图坐标系的概念,并通过图示进行了解释。接着提到了View的大小可以超过手机屏幕,并且只有在手机屏幕内才能看到。最后,作者表示将在后续文章中继续探讨与View相关的内容。 ...
[详细]
蜡笔小新 2023-12-10 13:13:29
蜡笔小新 2023-12-14 19:14:56
本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ...
[详细]
蜡笔小新 2023-12-14 18:45:00
今天在看一个代码里头写了GetWindowLong(hwnd,0),我当时就有点费解,靠,上网搜索函数原型说明,死活找不到第 ...
[详细]
蜡笔小新 2023-12-14 17:58:15
Google Play推出全新的应用内评价API,帮助开发者获取更多优质用户反馈。用户每天在Google Play上发表数百万条评论,这有助于开发者了解用户喜好和改进需求。开发者可以选择在适当的时间请求用户撰写评论,以获得全面而有用的反馈。全新应用内评价功能让用户无需返回应用详情页面即可发表评论,提升用户体验。 ...
[详细]
蜡笔小新 2023-12-13 17:23:03
本文记录了学习Python正则表达式的过程,介绍了re模块的常用方法re.search,并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具,通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ...
[详细]
蜡笔小新 2023-12-13 16:37:19
本文介绍了C++中字符字符串处理的问题,并详细解释了字符集编码方案,包括UNICODE、Windows apps采用的UTF-16编码、ASCII、SBCS和DBCS编码方案。同时说明了ANSI C标准和Windows中的字符/字符串数据类型实现。文章还提到了在编译时需要定义UNICODE宏以支持unicode编码,否则将使用windows code page编译。最后,给出了相关的头文件和数据类型定义。 ...
[详细]
蜡笔小新 2023-12-13 04:59:58
本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ...
[详细]
蜡笔小新 2023-12-10 15:14:25
Android获取app应用程序大小的方法-Android对这种方法进行了封装,我们没有权限去调用这个方法,所以我们只能通过AIDL,然后利用Java的反射机制去调用系统级的方法。 ...
[详细]
蜡笔小新 2023-10-17 19:45:21
活动主题:五一巨献,问答有礼,105QB送给IT互联网界的劳动人民活动时间:4月30日晚上10点~5月2日晚上10点网址:http:ask.jiutianniao.com ...
[详细]
蜡笔小新 2023-10-14 12:08:45
Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ...
[详细]
蜡笔小新 2023-12-14 17:38:12
本文介绍了brain的意思、读音、翻译、用法、发音、词组、同反义词等内容,以及脑新东方在线英语词典的相关信息。还包括了brain的词汇搭配、形容词和名词的用法,以及与brain相关的短语和词组。此外,还介绍了与brain相关的医学术语和智囊团等相关内容。 ...
[详细]
蜡笔小新 2023-12-14 16:52:33
本文介绍了设计师伊振华受邀参与沈阳市智慧城市运行管理中心项目的整体设计,并以数字赋能和创新驱动高质量发展的理念,建设了集成、智慧、高效的一体化城市综合管理平台,促进了城市的数字化转型。该中心被称为当代城市的智能心脏,为沈阳市的智慧城市建设做出了重要贡献。 ...
[详细]
蜡笔小新 2023-12-14 16:35:39
本文详细介绍了Spring的JdbcTemplate的使用方法,包括执行存储过程、存储函数的call()方法,执行任何SQL语句的execute()方法,单个更新和批量更新的update()和batchUpdate()方法,以及单查和列表查询的query()和queryForXXX()方法。提供了经过测试的API供使用。 ...
[详细]
蜡笔小新 2023-12-13 14:27:11
本文介绍了利用ARMA模型对平稳非白噪声序列进行建模的步骤及代码实现。首先对观察值序列进行样本自相关系数和样本偏自相关系数的计算,然后根据这些系数的性质选择适当的ARMA模型进行拟合,并估计模型中的位置参数。接着进行模型的有效性检验,如果不通过则重新选择模型再拟合,如果通过则进行模型优化。最后利用拟合模型预测序列的未来走势。文章还介绍了绘制时序图、平稳性检验、白噪声检验、确定ARMA阶数和预测未来走势的代码实现。 ...
[详细]
蜡笔小新 2023-12-09 08:30:08
被爱的善良的小鸽_212
这个家伙很懒,什么也没留下!