首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    网页|HTML5 也可以画一(canvas)

    1.引言 在日常生活总喜欢涂涂画画写写,这样可以使表达更加直观,记录的也更加详细,而在HTML5同样可以画一。...canvas意为画布,现实生活中用它来作画,在HTML5的canvas与之类似,可以称它为“网页的画布”,有了这个画布便可以轻松的在网页绘制图形、文字、图片等。...2.初识画布 HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。因为 标签只是图形容器,所以必须使用脚本来绘制图形。...(1)创建一个画布 HTML5提供了标签,使用标签可以在网页创建一个矩形区域的画布。但值得注意的是在默认情况下 元素没有边框和内容。...在canvas图形绘制,不能像日常生活,提笔想在哪里就在哪里,在这里需要用到坐标来实现。 ?

    2.4K20

    坦克大战重燃战火!手把手教你用JavaScript打造经典游戏

    借助HTML5、CSS3和JavaScript,开发者们能够创造出丰富的Web应用和游戏,使得在浏览器上也能享受游戏的乐趣。...而现在,我们通过Web技术,可以把这一记忆的经典游戏带到浏览器里。HTML5 Canvas:作为绘制图形的利器,Canvas提供了一个像素级的绘图环境,可以用来绘制我们游戏中的坦克和地图。...main.js,我们将实现游戏的主要逻辑。...结语:重燃战火的未来展望在本文中,我们从零开始,使用HTML5、CSS3和JavaScript构建了一个基础版本的“坦克大战”游戏。虽然它简单,但已经展示了一个经典的重燃战火。...码克疯v1 | 技术界的疯狂探索者 | 在代码的宇宙,我是那颗永不满足的探索星。

    14110

    Java实现坦克大战1.0

    在Java坐标系,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。...drawLine(int x1,int y1,int x2,int y2) 2.矩形边框 drawRect(int x, int y, int width, int height) 3.椭圆边框...//直线 drawLine(int x1,int y1,int x2,int y2) //g.drawLine(10, 10, 100, 100); //矩形边框 drawRect...java.awt.event包和javax.swing.event包定义了各种事件类型 事件类型:查阅jdk文档 事件监听器接口: (1)当事件源产生一个事件,可以传送给事件监听者处理...(3)事件监听器接口有多种,不同的事件监听器接口可以监听不同的事件,一个类可以实现多个监听接口 (4)这些接口在java.awt.event包和javax.swing.event包定义。

    73910

    跨平台开源游戏

    它使用HTML5、CSS3等Web新技术构建的在线平台,天然的基于互联网,Tank机器人的代码不需要人工上传下载,可以直接在线运行与其他选手进行战斗。 软件截图: ? 23183043_kv2a ?...styled-components: react css 解决方案,CSS-IN-JS 最佳实践。 eslint + prettier: 为了更好地编码。...(支持无限关卡) 关卡设置包括敌人坦克数量, 移动速度, 子弹速度, 以及子弹的杀伤力, 炸弹数量, 飞弹数量, 移动随机因子, 子弹发送频率因子。...L - 发射无敌飞弹(需要有飞弹, 可以在关卡设置)。 P - 暂停/开始。 ESC - 退回关卡选择界面。 H - 弹出/隐藏帮助窗口。 软件截图: ? ? ? ? ?...Cocos2d-JS 统一了使用 JS 进行开发的开发体验,将 HTML5 引擎与 JSB 的 API 高度统一起来。

    2.7K40

    熬夜总结了 “HTML5布” 的知识点(共10条)

    对于Canvas需要掌握: 使用Canvas直线,矩形,圆形以及设置它们的样式。 ? Canvas的图形变换,渐变,文字和图片。 ?...,矩形和原型 直线:ctx.moveTo(x1,y1),ctx.lineTo(x2,y2) 画圆形: ctx.arc(x,y,radius,0,Math.PI*2,true) 矩形:可以通过直线来...,渐变,文字和图片 Canvas的图像变换 Canvas的渐变 Canvas的文字 Canvas的图片 Canvas的图形变换 图形变换都是针对坐标系来说的: 平移:ctx.translate...ctx.createPattern可以创建一个刷模式,进而可以设置到fillStyle里,进行刷的填充。...后台解决跨域问题 转成base64格式(后端,前端,建议前端) html5移动端生成海报 大致效果: ?

    7.1K21

    HTML5的拖放功能

    HTML5的拖放API功能直接实现拖放操作,而且拖放的范围已经超出浏览器的边界,HTML5提供的文件api支持拖拽多个文件并上传。...要学会掌握html5的拖放api和 文件api,光标拖放事件,从web网页上访问本地文件系统。...拖放api 在html5的拖放api重点: 第一,为页面元素提供了拖放特性; 第二,为光标增加了拖放事件; 第三,提供了用于存储拖放数据的DataTransfer对象 draggable特性 draggable...-drop元素 第七,在拖放操作结束时触发,事件的作用对象是被拖拽的元素-dragend事件 DataTransfer对象 在html5提供了DataTransfer对象,用来支持拖拽数据的存储。...如:FileList对象,File对象,Blob接口,FileReader接口 增加的标签特性 在html5file类型的表单元素增加了multiple特性和accept特性 multiple特性

    2.6K10

    熬夜总结了 “HTML5布” 的知识点(共10条)

    效果动画,加载Loading: H5游戏效果: 对于Canvas需要掌握: 使用Canvas直线,矩形,圆形以及设置它们的样式。 Canvas的图形变换,渐变,文字和图片。...使用Canvas基本图形 Canvas的坐标体系 使用Canvas直线,矩形,圆形 为圆形设置样式 Canvas坐标体系 canvas默认大小,300*150 通过HTML,css,JavaScript...设置width和height的区别 HTML和JavaScript设置的画布大小 css设置的是画布缩放后的大小 坐标系原点及方向(原点在左上角,向右为x方向,向下为y方向) 直线,矩形和原型 直线...,渐变,文字和图片 Canvas的图像变换 Canvas的渐变 Canvas的文字 Canvas的图片 Canvas的图形变换 图形变换都是针对坐标系来说的: 平移:ctx.translate...ctx.createPattern可以创建一个刷模式,进而可以设置到fillStyle里,进行刷的填充。

    7.5K10

    Avalonia的线性渐变刷LinearGradientBrush

    尽管官方提供了从WPF到Avalonia的快速入门文档,但由于第一次使用Avalonia,体验过程并不是很顺利,主要是卡在线性渐变刷LinearGradientBrush的使用上。...Avalonia的线性渐变刷与WPF的略有差异,但相关文档并不多,故将此次经历记录下来并分享,希望能帮助大家少走弯路。...,并通过GradientStops属性设置刷渐变停止点。...到了这里,基本明白了Avalonia中线性刷的机制,StartPoint设置相对值时需要用百分制的数值,与WPF相对值模式不同的是,Avalonia相对模式的百分比是基于绘制区域的尺寸,但坐标系统不是基于绘制区域边界...总结 经过一番尝试和分析,对于Avalonia中线性渐变刷有了基本了解。归纳了以下几点内容: Avalonia中线性渐变刷既支持相对模式,也支持绝对模式。

    19610

    前端|HTML5的网络存储

    传统方式使用document.cookie来进行存储,但是由于其存储的空间只有4KB左右,并且需要复杂的操作进行解析,给发开者带来很多不便,为此,HTML5规范提出了网络存储的解决方案。...2.2 localStorage实现本地存储 localStorage作为HTML5 Web Storage的API之一,主要的作用是进行本地存储。...2.2.1 localStorage的方法属性 方法属性 描述 setItem(key,value) 该方法接收一个键名和值作为参数,将会把键值对添加到存储,如果键名存在,则更新其对应的值 getItem...的数据保存在浏览器的内存,当浏览器关闭后,内存将被自动清除,需要注意的是,sessionStorage存储的数据只在当前浏览器窗口有效。...).onclick = function() { window.sessionStorage.clear(); }; 3 总结 HTML5

    1.4K10

    HTML5引入的关键特性

    使用这种类型的特性可以避免创建自定义特性或者过载class特性的常见方法 draggable 定义特性时,允许元素与其内容可以被拖放 hidden 在HTML5,所有元素都可以有hidden特性,用于表示元素不相关...这是一个可选的特性,如果使用该特性,那么就必须将其放置在设置itemscope和itemtype两个特性的元素。...任何包含itemscope特性的子标签都可以设置一个itemprop特性,为该项增加特性 itemref 该特性用于指定应该从哪些附加元素为内容项寻找名称/值数据对。...在默认情况下,只在包含itemscope特性的子元素寻找。然而,如果数据相互交叉,只有唯一一个父项时,这个特性就没有意义了。在这里,itemref特性可以设置为在一组由空格分割开的子元素寻找。...这是一个可选项,但是如果使用的话,就必须将其放置在设置itemscope特性的同一个元素。该特性值的形式必须是URL spellcheck 该特性使得元素能够进行拼写检查。

    1.2K90

    HTML5download属性的应用

    2015-09-22 01:43:08 写这篇文章主要是来向大家介绍一下HTML5当中download属性的用法和之前下载的区别。需要的朋友可以看一下。...在以往传统的html下载文件样式是这样的 下载 而在HTML 5浏览器,可以支持download属性了,如下: 下载 download属性的好处在于,在用户下载文件的时候,显示在用户浏览器 的“另存”为的文件显示框...,显示的是这个downloader属性显示的 东西了,比较友好 HTML5里,download属性为下载的文件取一个合适的名字,而不是使用原生的服务器文件名。...在这个例子,文件将被下载为test.txt。download属性同时开启了一个强制下载。 这个属性在存在文件交互的地方非常有用,在服务器端的文件名需要是及其独特的(上例的文件名就很独特不是吗?)

    99910
    领券