Canvas

极客小兵

极客小兵|canvas七巧板(处女作)

发布于 昨天 21:39 浏览:199 类型:原创 - 教程 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Canvas七巧板</title></head><body><canvasid="canvas"style="border:1pxsolid#aaa;display:block;margin:50pxauto;"></canvas><scripttype="text/javascript">vartangram=[ ...

webLS

webLS|canvas绘制的直线动画

发布于 昨天 17:01 浏览:146 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>firstline</title><styletype="text/css">body{background:#456E89;}.canvas{height:300px;width:300px;mar ...

zdxaibeyond

zdxaibeyond|flower 非常非常牛逼的效果!~~~~

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

html代码效果预览<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="utf-8"><title>flower</title></head><styletype="text/css">body{padding:0;margin:0;overflow:hidden;height:600px;}canvas{padding:0;margin:0;}div.btnbg{position:fixed;left:0; ...

hugeannex

hugeannex|Canvas之自行车

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

到这公司后,就一直忙,直到现在快过年了,才有喘气的机会。才有时间写点乱七八糟的代码。今年最后一个笔记了。。。看这简陋的车,却花一半天时间。。。。html代码效果预览<!DOCTYPEhtml><html><head><metacharset="utf-8"/><metaname="author"content=""/><metaname="keyw ...

59580

59580|html5 canvas 详细使用教程

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

原文教程链接html5canvas效果预览<!DOCTYPEhtml"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title></title><scripttype="text/javascript">functiondraw21(id){varcanvas=document.getElementById(id)if(canvas==null)returnfal ...

1379089794

1379089794|会发光而且很萌萌哒的盒子背景

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

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>背景光</title><style>*{box-sizing:border-box;}html,body{margin:0auto;height:100%;}body{display:flex;align- ...

FlyingWWS

FlyingWWS|Three.js制作3D正方形

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

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>a_threeJS_one</title><style>#canvas{width:1100px;height:600px;background:palevioletred;border:1pxsolid;}</style><!--步 ...

《JavaScript半知半解》和《Web开发实战》目前都已经发布,而关于电子版,都还没有开放下载。对于《Web开发实战》的电子版,将会在完成100个功能时开放下载,预计是过完年后的2月底或3月初。而《JavaScript半知半解》的电子版,将会从今天起搞个优惠大酬宾,只要购买了《Web开发实战》的,都可获取《JavaScript半知半解 ...

娜娜子

娜娜子|canvas流星雨的背景

发布于 2017-01-13 14:26:26 浏览:2042 类型:原创 - 随笔 分类:HTML/CSS 举报

看到一个很棒的流星雨效果。修改一下样式就可以作为网页背景了。。!自己用这个背景加了几个按钮,做了个非常简单的demo,放在github:https://github.com/lily920416/MeteorShower;以后有需要可以参考一下了html代码效果预览<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>一起 ...

WebMaster

WebMaster|推销自己的前端技术书籍

发布于 2017-01-12 23:45:48 浏览:1634 类型:原创 - 教程 分类:JavaScript 举报

今天主要自我推销两本前端技术书籍!《JavaScript半知半解》《Web开发实战》如果链接失效,可复制这里:《JavaScript半知半解》http://www.kancloud.cn/dennis/tgjavascript《Web开发实战》http://www.kancloud.cn/dennis/javascriptmethod一、《JavaScript半知半解》为什么写这本书?因为之前作者在博客上洋 ...

推销自己的前端技术书籍
calvein

calvein|H5时钟代码

发布于 2017-01-12 22:31:30 浏览:261 类型:原创 - 教程 分类:JavaScript 举报

javascript代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>时钟</title></head><body><header><h1>时钟</h1></header><artical><section><figure><canvasid="one"width="800"height="800"></canvas> ...

FlyingWWS

FlyingWWS|数字图像算法——图像模糊化 JavaScript实现

发布于 2017-01-12 18:27:30 浏览:658 类型:原创 - 随笔 分类:JavaScript 举报

一幅完整的图像,是由红色、绿色、蓝色三个通道组成的。红色、绿色、蓝色三个通道的缩览图都是以灰度显示的。用不同的灰度色阶来表示"红,绿,蓝"在图像中的比重。通道中的纯白,代表了该色光在此处为最高亮度,亮度级别是255。模糊化方法:就是将一个像素点的R(G,B)和它周围像素点的R( ...

数字图像算法——图像模糊化 JavaScript实现
FlyingWWS

FlyingWWS|数字图像算法——图像二值化 JavaScript实现

发布于 2017-01-12 11:25:38 浏览:145 类型:原创 - 随笔 分类:JavaScript 举报

一幅完整的图像,是由红色、绿色、蓝色三个通道组成的。红色、绿色、蓝色三个通道的缩览图都是以灰度显示的。用不同的灰度色阶来表示"红,绿,蓝"在图像中的比重。通道中的纯白,代表了该色光在此处为最高亮度,亮度级别是255。图像二值化就是将图像上的像素点的灰度值设置为0或255,也就是将整个图像呈现出明显的黑白效 ...

数字图像算法——图像二值化 JavaScript实现
ccg

ccg|手把手教你撸一个泡妞神奇

发布于 2017-01-11 19:32:27 浏览:450 类型:原创 - 教程 分类:JavaScript 举报

哈哈哈哈!!!当我说在写这边文章的时候,妹子已经追到了,哈哈哈哈哈!!!其实东西是一年前写的,妹子早就追到手了,当时就是用这个东西来表白的咯,二话不说,先看效果(点击屏幕可显示下一句)当时我是在codepan上看到一个很漂亮的pan,漫天星空,男孩独自看着,当时我就想如果可以把星星变成字就好了,于是 ...

手把手教你撸一个泡妞神奇
FlyingWWS

FlyingWWS|数字图像算法——256色转灰度图 JavaScript实现

发布于 2017-01-11 10:35:35 浏览:133 类型:原创 - 随笔 分类:JavaScript 举报

一幅完整的图像,是由红色、绿色、蓝色三个通道组成的。红色、绿色、蓝色三个通道的缩览图都是以灰度显示的。用不同的灰度色阶来表示"红,绿,蓝"在图像中的比重。通道中的纯白,代表了该色光在此处为最高亮度,亮度级别是255。灰度化方法:1.浮点算法:Gray=R*0.299+G*0.587+B*0.114 ...

数字图像算法——256色转灰度图 JavaScript实现
君邪儿

君邪儿|复习canvas绘制吃豆鱼

发布于 2017-01-09 17:19:50 浏览:345 类型:原创 - 随笔 分类:JavaScript 举报

html代码效果预览<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>canvas吃豆鱼</title></head><style>body{text-align:center;}canvas{background:#efefef;}</style><body><h1>角度转为弧度:<br/>弧度=2*PI*角度/360=角度*PI/180</h1><!--画布的宽和高只 ...

494014770

494014770|canvas鼠标滑过动画(转载)

发布于 2017-01-09 16:43:39 浏览:274 类型:原创 - 随笔 分类:JavaScript 举报

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><styletype="text/css">body{margin:0;padding:0;}#canvas{background-color:#000;}</style></head><body><canvasid="canvas"></canvas><script>v ...

fanbuxie

fanbuxie|Canvas钟表

发布于 2017-01-09 10:54:41 浏览:187 类型:原创 - 随笔 分类:JavaScript 举报

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>canvas时钟</title><style>*{padding:0;margin:0;}body{background:#ccc;}#c{background:#fff;}</style></head><script>window.onload=function(){varoC=document ...

hyperh5

hyperh5|canvas随机画一百个不同的彩色小球

发布于 2017-01-08 16:30:25 浏览:266 类型:原创 - 随笔 分类:JavaScript 举报

html代码效果预览<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/><title>随机球球</title><styletype="text/css">#canvas{margin:100pxauto;border:2pxdashedlawngreen;position:relative;}</style></head><body><canvasid="canvas"width="600"height="600"> ...

wocacaca

wocacaca|一个canvas环形刻度进度条效果

发布于 2017-01-06 17:25:15 浏览:1753 类型:原创 - 随笔 分类:HTML/CSS 举报

公司项目的一个demo,需要效果如图所示:在这个论坛的问问上问了,希望得到好的思路,没人回我,只好自己想了一个,代码如下:html代码效果预览<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="renderer"content="webkit"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chro ...