
canvas
Vivian_shuang
Be a IT engineer!
展开
-
canvas1
DOCTYPE html>html>head>metacharset="utf-8" />title>title>styletype="text/css">canvas{box-shadow: 0 0 10px paleturquoise;}style>head>body>canvasid="canvas" width="原创 2016-08-08 08:30:41 · 423 阅读 · 3 评论 -
时钟倒计时
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>title> new document tit原创 2016-08-09 08:56:47 · 428 阅读 · 0 评论 -
滑杆控制缩放图片
DOCTYPE html>html>head>metacharset="UTF-8">title>title>head>body>canvasid="canvas" width="750" height="420">canvas>br>inputtype="range" name="" id="slider"min="0.5" max="3.原创 2016-08-09 08:57:40 · 592 阅读 · 0 评论 -
添加水印
DOCTYPE html>html>head>metacharset="UTF-8">title>title>head>body>canvasid="canvas" width="750" height="420">canvas>br>inputtype="range" name="" id="slider"min="0.5" max="3.原创 2016-08-09 08:58:17 · 347 阅读 · 0 评论 -
放大镜
DOCTYPE html> html> head lang="en"> meta charset="UTF-8"> title>title> head> body style="background:black;"> canvas id="canvas"style="display:block;margin:0a原创 2016-08-09 08:58:52 · 375 阅读 · 0 评论 -
canvas碰撞检测1
DOCTYPE html>html>head>metacharset="UTF-8">title>title>head>body>canvasid="canvas" width="500" height="500">canvas>scripttype="text/javascript">varcanvas = document.getElem原创 2016-08-09 08:59:50 · 447 阅读 · 0 评论 -
canvas碰撞检测2
DOCTYPE html>html>head>metacharset="UTF-8">title>title>head>body>canvasid="canvas" width="500" height="500">canvas>scripttype="text/javascript">varcanvas = document.getElem原创 2016-08-09 09:00:24 · 517 阅读 · 0 评论 -
canvas碰撞检测3
DOCTYPE html>html>head>metacharset="UTF-8">title>title>styletype="text/css">*{margin:0;padding:0;}style>head>body>canvasid="canvas" width="500" height="500">canva原创 2016-08-09 09:01:00 · 465 阅读 · 0 评论 -
canvas碰撞检测4
DOCTYPE html>html>head>metacharset="UTF-8">title>title>styletype="text/css">*{margin:0;padding:0;}style>head>body>canvasid="canvas" width="500" height="500">canva原创 2016-08-09 09:01:29 · 724 阅读 · 0 评论 -
move块
DOCTYPE html>html>head>metacharset="UTF-8">title>title>styletype="text/css">*{margin:0;padding:0;}style>head>body>canvasid="canvas" width="500" height="500">canva原创 2016-08-09 09:01:58 · 491 阅读 · 0 评论 -
饼状图
DOCTYPE html>html>head>metacharset="UTF-8">title>title>head>body>canvasid="canvas" width="500" height="500">canvas>scripttype="text/javascript">varcanvas = document.getElem原创 2016-08-09 09:02:34 · 293 阅读 · 0 评论 -
贪吃蛇简化
DOCTYPE html>html>head>metacharset="UTF-8">title>title>styletype="text/css">canvas{box-shadow:2px 2px10px deeppink;}style>head>body>canvasid="canvas" widt原创 2016-08-09 09:05:22 · 326 阅读 · 0 评论 -
飞翔的小鸟
DOCTYPE html>html>head> title>Flappy Birdtitle> meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> script type="text/javascript"> // Edit by xingoo原创 2016-08-09 09:06:07 · 1482 阅读 · 0 评论 -
打飞机html + js + canvas
loading.js文件// 三个参数:// 1. 所有要加载的图片对象// 2.加载进度函数// 3.加载完成函数functionloading(imgsObj,handleObj) {// 遍历对象,得到对象中属性的个数,即有多少张图片varcount = 0;varcurrentIndex = 0;for(propin imgsObj)原创 2016-08-09 09:08:52 · 2767 阅读 · 0 评论 -
星星闪烁
DOCTYPE html>html>head>metacharset="UTF-8">title>title>head>body>div>canvasid="canvas" width="800" height="800">canvas>div>scripttype="text/javascript">varcanvas;var原创 2016-08-09 08:56:16 · 449 阅读 · 0 评论 -
滑动变色
DOCTYPE html>html>head>metacharset="UTF-8">title>title>head>body>canvasid="canvas" width="750" height="420">canvas>br>inputtype="range" name="" id="r"value="0" />原创 2016-08-09 08:55:18 · 330 阅读 · 0 评论 -
红包模糊
DOCTYPE html>html>head>metacharset="utf-8" />metaname="viewport" content="height=device-height,width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalabl原创 2016-08-09 08:54:53 · 425 阅读 · 0 评论 -
canvas2
DOCTYPE html>html>head>metacharset="UTF-8">title>title>head>body>canvasid="canvas" width="500" height="500">canvas>scripttype="text/javascript">varcanvas = document.getElem原创 2016-08-08 08:31:26 · 424 阅读 · 3 评论 -
canvas小例子clock
DOCTYPE html>html>head>metacharset="UTF-8">title>title>head>body>canvasid="canvas" width="500" height="500">canvas>scripttype="text/javascript">varcanvas = document原创 2016-08-08 08:32:20 · 349 阅读 · 6 评论 -
canvas版时钟
DOCTYPE html>html>head>metacharset="UTF-8">title>title>styletype="text/css">canvas{box-shadow:0 0 10px paleturquoise;}style>head>body>canvasid="canvas" widt原创 2016-08-08 08:33:16 · 314 阅读 · 6 评论 -
canvas八卦图1
DOCTYPE html>html>head>metacharset="UTF-8">title>title>head>body>canvasid="canvas" width="500" height="500">canvas>scripttype="text/javascript">varcanvas = document原创 2016-08-08 08:34:42 · 556 阅读 · 6 评论 -
canvas八卦图2
DOCTYPE html>html>head>metacharset="UTF-8">title>title>head>body>canvasid="canvas" width="500" height="500">canvas>scripttype="text/javascript">varcanvas = document原创 2016-08-08 08:35:31 · 311 阅读 · 3 评论 -
贝塞尔曲线1
DOCTYPE html>html>head>metacharset="UTF-8">title>title>styletype="text/css">*{padding:0;margin:0;}#canvas{position:absolute;top:20px;left:20px;z-index:1;}原创 2016-08-08 08:38:06 · 263 阅读 · 3 评论 -
贝塞尔曲线2
DOCTYPE html>html>head>metacharset="UTF-8">title>title>styletype="text/css">*{margin:0;padding:0;}.wrap{position:relative;margin:50px;}#red{width:20px;原创 2016-08-08 08:38:43 · 265 阅读 · 3 评论 -
放大镜圆形
DOCTYPE html>html>head>metacharset="UTF-8">title>title>styletype="text/css">*{margin:0;padding:0;}img{position:absolute;top:0;left:0;width:750px;}canvas原创 2016-08-08 08:41:07 · 587 阅读 · 6 评论 -
canvas小例子-刮刮乐
DOCTYPE html>html>head>metacharset="UTF-8">title>title>styletype="text/css">*{margin:0;padding:0;}img{position:absolute;top:0;left:0;}canvas{position:ab原创 2016-08-08 08:43:00 · 700 阅读 · 5 评论 -
canvas视频处理
DOCTYPE html>html>head>metacharset="UTF-8">title>title>head>body>videosrc="videoviewdemo.mp4" autoplay="" id="video"loop="">你的浏览器不支持视频video>canvasid="canvas" width=原创 2016-08-09 08:51:48 · 2647 阅读 · 0 评论 -
canvas 图像1
DOCTYPE html>html>head>metacharset="utf-8" />title>title>styletype="text/css">canvas{box-shadow:5px 5px 10px#ccc;}style>head>body>canvasid="canvas" width="500"原创 2016-08-09 08:52:29 · 279 阅读 · 0 评论 -
canvas图像2
DOCTYPE html>html>head>metacharset="UTF-8">title>title>head>body>canvasid="canvas" width="500" height="500">canvas>scripttype="text/javascript">varcanvas = document.getElem原创 2016-08-09 08:52:55 · 282 阅读 · 0 评论 -
canvas图像叠加
DOCTYPE html>html>head>metacharset="UTF-8">title>title>head>body>canvasid="canvas" width="500" height="500">canvas>scripttype="text/javascript">varcanvas = document.getElem原创 2016-08-09 08:53:29 · 1719 阅读 · 0 评论 -
svg简单使用
html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>head>body>svg width="500" height="500"> rect x="10" y="10" width="30" height="30" stroke="pink" fill="yellow" str原创 2016-09-27 08:54:07 · 510 阅读 · 0 评论