<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body onload="draw()">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
<script>
function draw(){
var canvas=document.getElementById("canvas");
if(canvas==null)
{return false;}

var context=canvas.getContext("2d");

context.fillStyle="#eeeeef";
context.fillRect(0,0,500,500);
context.translate(200,50);
context.fillStyle="rgba(255,0,0,0.25)";
for(var i=0;i<50;i++)
{
context.translate(25,25);
context.scale(0.95,0.95);
context.rotate(Math.PI/10);
context.fillRect(0,0,100,50);
}
//g1=context.createRadialGradient(0,0,20,200,200,80);
//g1.addColorStop(0,"rgb(255,255,0)");
// g1.addColorStop(0.3,"rgb(234,67,98)");
//g1.addColorStop(1,"rgb(89,67,98)");
//context.fillStyle=g1;
//context.fillRect(0,0,300,300);
}
</script>
</html>

canvas-画蜗牛的更多相关文章

  1. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  2. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  3. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  4. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

  5. 用sass画蜗牛

    一.sass的好处 用css画图也算是简单的实战吧,虽然用到的东西还比较少..用过之后,发现sass主要有以下优势: 可维护性.最重要的一点,可维护性的很大一部分来自变量 嗯,最简单的例子,画图总要有 ...

  6. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

  8. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  9. 樱花的季节，教大家用canvas画出飞舞的樱花树

    又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...

  10. HTML5之Canvas画圆形

    HTML5之Canvas画圆形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> & ...

随机推荐

  1. 在浏览器中打不开Oracle 11gR2的企业管理器页面

    最简单的办法,重建EM 四个步骤: emca -repos drop emca -repos create emca -config dbcontrol db emctl start dbconsol ...

  2. ajax上传文件进度条

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. Struts2 之 ognl

    OGNL表达式语言(#号的用法) 用法1:访问OGNL上下文和Action上下文,#相当ActionContext.getContext() 1.  如果访问其他Context中的对象,由于他们不是根 ...

  4. 你好，C++（30）“大事化小，小事化了”5.4.3 工资程序成长记：函数

    5.4.3 工资程序成长记:函数 自从上次小陈“程序员”的工资程序得到老板的夸奖,口头许诺给他涨工资以后,老板再也没有找过他,涨工资的事自然也就没有下文了.这天,老板又突然召他去办公室.这下可把小陈高 ...

  5. Python3学习之一环境搭建

    Windows 7 Python343下载 PTVS下载 Linux CentOS7 wget https://www.python.org/ftp/python/3.4.3/Python-3.4.3 ...

  6. Win+PHP+IECapt完整实现网页批量截图并创建缩略图

    最近在开发一个本地互联网应用的项目,为了增加用户体验,需要在搜索结果左侧显示如图一所示的某个网站的缩略图效果,在网上不停地百度谷歌了一上午后,发现大多数实现少量截图还是可以的,如果大批量的截图总会在中 ...

  7. 国内开源html5游戏引擎全收录

    本文引自<国内开源html5游戏引擎全收录> 游戏开发这潭水太深,英文水平太差,不敢看国外的, 而且这几年国内技术水平也挺高了不少,特别是JS方面.(我个人感觉) 最近看了几个国产的js游 ...

  8. 第几天 switch做法 杭电

    第几天? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  9. Azure构建PredictionIO和Spark的推荐引擎服务

    Azure构建PredictionIO和Spark的推荐引擎服务 1. 在Azure构建Ubuntu 16.04虚拟机 假设前提条件您已有 Azure 帐号,登陆 Azure https://port ...

  10. Objective-C中单例模式的实现-备

    单例模式在Cocoa和Cocoa Touch中非常常见.比如这两个,[UIApplication sharedApplication]和[NSApplication sharedApplication ...