Canvas

1024649179

1024649179|JavaScript canvas

发布于 3 天前 浏览:56 类型:转载 - 教程 分类:JavaScript 举报

简介HTML5<canvas>是绘制图形/图像的容器。它本身并没有绘制能力,您必须使用脚本来完成实际的绘图任务(通常是JavaScript)。如果浏览器不支持<canvas>的话,会显示<canvas>标签内定义的元素。例如,下面代码在不支持的<canvas>浏览器下就会忽略<canvas>标签,显示<p>标签。 ...

linhuangmao

linhuangmao|canvas坦克大战

发布于 4 天前 浏览:173 类型:原创 - 随笔 分类:HTML/CSS 举报

页面不怎么好看,大致功能差不多如下: ...

canvas坦克大战
fe_kevin

fe_kevin|canvas动画系列5【绚丽的烟花】

发布于 4 天前 浏览:308 类型:原创 - 随笔 分类:JavaScript 举报

就是因为数学不好,花了大半天搞的这玩意,感觉自己的数学知识都还给体育老师了。您可以点击并拖动屏幕玩玩。html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>绚丽的烟花</title><metaname="viewport"cont ...

花落谁家

花落谁家|javascript落水无情

发布于 5 天前 浏览:189 类型:原创 - 随笔 分类:JavaScript 举报

html代码效果预览<!doctypehtml><html><head><metacharset="UTF-8"><title>梦柯教育-锤子老师</title><styletype="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;color:#fff;}body{overflow:hidden;background:black;text-align:center;line-hei ...

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>轨迹运动</title><metaname="viewport"content="initial-scale=1,maximum-scale=1"><metaname="apple-mobile-web-app-capable"content="yes"> ...

夏noodle

夏noodle|使用 HTML5 Canvas标签 画一个简单的时钟

发布于 6 天前 浏览:181 类型:原创 - 教程 分类:HTML/CSS 举报

使用HTML5Canvas标签画一个时钟效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>canvas</title><style>body{background:black;}#c1{background:white;}</style><script>window.onload=function(){varoc=document.getElem ...

fe_kevin

fe_kevin|canvas动画系列3【粒子进度条】

发布于 6 天前 浏览:350 类型:原创 - 随笔 分类:JavaScript 举报

今天看到了本站一位大神的粒子进度条效果,感觉还不错。趁着最近学习canvas情绪高涨,立马按照自己的思路实现了一下,闲话不多说,直接看效果。html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>带粒子的进度条</tit ...

fe_kevin

fe_kevin|cavans动画系列2【粒子喷泉】

发布于 6 天前 浏览:1632 类型:原创 - 随笔 分类:JavaScript 举报

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>粒子喷泉</title><metaname="viewport"content="initial-scale=1,maximum-scale=1"><metaname="apple-mobile-web-app-capable"content="yes"> ...

differ_wy

differ_wy|【canvas】打造环形进度条

发布于 6 天前 浏览:1344 类型:原创 - 教程 分类:JavaScript 举报

昨下午睡着了,晚上打开手机才发现朋友给我发了一个QQ消息,问我这个怎么实现?这里就选canvas来简单写一下先上代码,然后在说一说需要注意的点:canvas环形进度条效果预览<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>canvas环形进度条</title><style>body{background-color:#000;t ...

lut09010909

lut09010909|疯狂的canvas

发布于 7 天前 浏览:205 类型:原创 - 随笔 分类:JavaScript 举报

专治强迫症。html代码效果预览<!DOCTYPEhtml><html><head><title>疯狂的canvas</title><metacharset="utf-8"/><metaname="author"content="lut"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-sc ...

fe_kevin

fe_kevin|canvas动画系列1【粒子连线】

发布于 7 天前 浏览:677 类型:原创 - 随笔 分类:JavaScript 举报

看到大神们的canvas动画很心动,决定边写边学canvas动画。html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>canvas动画练习</title><metaname="viewport"content="initial-scale=1,maximum-scale=1 ...

sunny红

sunny红|canvas图片保存

发布于 2017-03-20 14:55:05 浏览:131 类型:原创 - 教程 分类:HTML/CSS 举报

html代码效果预览<html><metahttp-equiv="X-UA-Compatible"content="chrome=1"><head><script>window.onload=function(){draw();varsaveButton=document.getElementById("saveImageBtn");bindButtonEvent(saveButton,"click",saveImageInfo); ...

sharminKid

sharminKid|canvas,一个脱离掌控的动画

发布于 2017-03-20 01:23:14 浏览:2215 类型:原创 - 随笔 分类:HTML/CSS 举报

捣鼓了两天,本来是想做一个旋转并排有序的圈。结果出来了一个漩涡</捂脸>后来,发现修改速度,竟然弄出了个怪物</再次捂脸>打开后静等5S,会有天使哦~readme:你可以修改changeV这个函数中的count峰值,或者延时数值,玩儿一下。PS:请务必玩儿坏</笑cry>当速度超过一定值的时候,判断dx<1会失效,于是,几个点就穿 ...

sunny红

sunny红|jquery 手势密码插件

发布于 2017-03-17 12:48:12 浏览:209 类型:转载 - 译文 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><!--<linkrel="stylesheet"href="../dist/css/danmuplayer.css">--></head><body>正确的密码是一个字母“Z”的形状哦!<divid="gesturepwd"></div></body><scriptsrc="http://www.jq22.com/demo ...

hpf18321655761

hpf18321655761|第一次用canvas写了个过桥的小游戏;欢迎指点

发布于 2017-03-16 16:48:06 浏览:261 类型:原创 - 随笔 分类:JavaScript 举报

以下是源码用浏览器移动端模式打开,长按开始。 ...

Cnzmg

Cnzmg|canvas玩得6的,已经飞了

发布于 2017-03-16 14:42:36 浏览:1493 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!doctypehtml><html><head><metacharset="utf-8"><title>js粒子旋涡</title><style>html,body{margin:0px;width:100%;height:100%;overflow:hidden;background:#000;}#canvas{position:absolute;width:100%;height:100%;}</style></head><body><canvasid="canvas"></ ...

sharminKid

sharminKid|初学,一个canvas动画

发布于 2017-03-16 12:33:25 浏览:539 类型:原创 - 随笔 分类:JavaScript 举报

仿原文@斑竹小队长的动画略加改进加些许css3修饰html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>YEAH</title></head><style>*{padding:0;margin:0;}body{background:black;overflow:hidden;}div#start{display:inline-block;position:absolute;left:50%; ...

kait1314

kait1314|这个真的可以玩一天

发布于 2017-03-15 16:28:13 浏览:3171 类型:转载 - 随笔 分类:JavaScript 举报

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body><canvasid='canvas'width="500"height="500"style="background:#ccc;">你的浏览器不行啊~</canvas><!--箭头函数--><script>functionArrow(){this.x=0;//初始位置thi ...

07_brookoo

07_brookoo|canvas变形知识点

发布于 2017-03-14 13:32:40 浏览:157 类型:原创 - 随笔 分类:JavaScript 举报

一、移动变形移动变形是ctx发生移动,而不是一个元素在发生移动,是整个坐标系移动。html代码效果预览<scripttype="text/javascript">varmycanvas=document.getElementById("mycanvas");varctx=mycanvas.getContext("2d");//变形ctx.translate(100,100);//画一个矩形ctx.f ...

canvas变形知识点
yuandaishi

yuandaishi|canvas井字游戏

发布于 2017-03-13 16:45:08 浏览:448 类型:原创 - 随笔 分类:JavaScript 举报

1.直接用dom实现会简单很多,不需要重新构建对象。2.电脑AI部分写的最蛋疼,AI不可能是我这个思路写的,不然五子棋和围棋要死人。html代码效果预览<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>一个很简答的游戏</title><styletype="text/css">*{margin:0;padding:0;} ...