h5-5 canvas

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');//绘制环境

    oGC.moveTo(200,200);

    //弧度 = 角度*Math.PI/180

    oGC.arc(200,200,150,0,10*Math.PI/180,true);//画园：圆心坐标，半径，开始角度，结束角度，画的方向true为逆时针。

    oGC.stroke();

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

</html>

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    function toDraw(){

        var x = 200;

        var y = 200;

        var r = 150;//圆点坐标，半径

        oGC.clearRect(0,0,oC.width,oC.height);

        var oDate = new Date();

        var oHours = oDate.getHours();

        var oMin = oDate.getMinutes();

        var oSen = oDate.getSeconds();

        var oHoursValue = (-90 + oHours*30 + oMin/2) * Math.PI/180;

        var oMinValue = (-90 + oMin*6) * Math.PI/180;

        var oSenValue = (-90 + oSen*6) * Math.PI/180;

        /*oGC.moveTo(x,y);

        oGC.arc(x,y,r,0,6*Math.PI/180,false);

        oGC.moveTo(x,y);

        oGC.arc(x,y,r,6*Math.PI/180,12*Math.PI/180,false);*/

        oGC.beginPath();

        for(var i=0;i<60;i++){

            oGC.moveTo(x,y);

            oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);

        }

        oGC.closePath();

        oGC.stroke();

        oGC.fillStyle = 'white';

        oGC.beginPath();

        oGC.moveTo(x,y);

        oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);

        oGC.closePath();

        oGC.fill();

        oGC.lineWidth = 3;

        oGC.beginPath();

        for(var i=0;i<12;i++){

            oGC.moveTo(x,y);

            oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);

        }

        oGC.closePath();

        oGC.stroke();

        oGC.fillStyle = 'white';

        oGC.beginPath();

        oGC.moveTo(x,y);

        oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);

        oGC.closePath();

        oGC.fill();

        oGC.lineWidth = 5;

        oGC.beginPath();

        oGC.moveTo(x,y);

        oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);

        oGC.closePath();

        oGC.stroke();

        oGC.lineWidth = 3;

        oGC.beginPath();

        oGC.moveTo(x,y);

        oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);

        oGC.closePath();

        oGC.stroke();

        oGC.lineWidth = 1;

        oGC.beginPath();

        oGC.moveTo(x,y);

        oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);

        oGC.closePath();

        oGC.stroke();

    }

    setInterval(toDraw,1000);

    toDraw();

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

</html>

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    oGC.moveTo(100,200);

    oGC.arcTo(100,100,200,100,50);

    oGC.stroke();

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

</html>

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    /*oGC.moveTo(100,200);

    oGC.quadraticCurveTo(100,100,200,100);

    oGC.stroke();*/

    oGC.moveTo(100,200);

    oGC.bezierCurveTo(100,100,200,200,200,100);

    oGC.stroke();

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

</html>

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    oGC.translate(100,100);

    oGC.rotate(20*Math.PI/180);

    oGC.rotate(25*Math.PI/180);

    oGC.scale(2,2);

    oGC.fillRect(0,0,100,100);

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

</html>

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    var num = 0;

    var num2 = 0;

    var value = 1;

    setInterval(function(){

        num++;

        oGC.save();

        oGC.clearRect(0,0,oC.width,oC.height);

        oGC.translate(100,100);

        if(num2 == 100){

            value = -1;

        }

        else if(num2 == 0){

            value = 1;

        }

        num2 += value;

        oGC.scale( num2*1/50,num2*1/50 );//改变尺寸

        oGC.rotate(num*Math.PI/180);    //旋转

        oGC.translate(-50,-50);

        oGC.fillRect(0,0,100,100);

        oGC.restore();

    },30);

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

</html>

h5-5 canvas的更多相关文章

h5标签canvas关于getImageData跨域的问题
h5标签canvas关于getImageData跨域的问题在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...
关于h5绘制canvas生成图片的注意点！
1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小, ...
关于H5的Canvas
1.什么是canvas? <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布. canvas可以绘制路径.图形.字以及添加图像. ...
HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图
Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...
H5使用Canvas绘图
一.什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的 ...
用H5的canvas做时钟
<!doctype html><html> <head> <meta charset="UTF-8"> <title>D ...
H5 认识canvas
不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. canvas提供了三 ...
H5标签-canvas实现颜色拾取功能
HTML5 <canvas> 标签是用于绘制图像,不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本(通常是 JS)来完成实际的绘图任务. &l ...
H5之canvas简单入门
<canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 <canv ...
H5的canvas绘图技术
canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果. 1 ...

随机推荐

Linux 下C++编写
今天搞了一天Linux下C++编程,还没有什么成效.好烦躁好心焦,想砸电脑的冲动.抽根烟理下思路一定要把它拿下!! ===搞了两天,真是搞到生无可恋,试了共享文件, 试了网络配置,各种博客就是各种行不 ...
Ubuntu上用快捷键关闭没有响应的程序
Linux 上有很多方法可以强制关闭无响应的程序,比如你可以通过按快捷键 Ctrl + Shift + T 来调出 Terminal 或者用 Ctrl + Shift + F1 进入 Console ...
Python：数字
一.数字简介数字可以直接访问,是不可更改并且不可分割的原子类型,这些在标准类型的分类中都谈到了.不可更改意味着变更数字值的实质是新对象的创建.当然,这些对于程序员来说都是透明的,不需过多考虑. 1. ...
获取子窗口中使用jQuery.data()设置的参数
http://hyj1254.iteye.com/blog/643035 假设在iframe子窗口中设置了$('#mydata').data('key','hello world'); 那在包含ifr ...
NServiceBus-网关和多站点分布
多站点部署的企业的数量.净系统由于增加的挑战高可用性和用户要求更快的响应时间,服务器和数据访问更接近. RPC技术迅速陷入困境在这些环境中,使机器在同一个站点和远程站点看起来是一样的. 在这些情况下, ...
一排下去再上来的div
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
delphi 判断调试状态
DebugHook 该变量在调试状态下值为1,运行模式为0,例如,我们可以使用如下的代码来简单控制: if DebugHook=0 then
Ubuntu下实用命令收集 --新增删除环境变量
1. 关闭防火墙: sudo ufw disable 2. 设置IPV4地址和网关: ifconfig eth0 up %s netmask %s route del default gw 192.1 ...
(转载)Java里快如闪电的线程间通讯
转自(http://www.infoq.com/cn/articles/High-Performance-Java-Inter-Thread-Communications) 这个故事源自一个很简单的想 ...
apache配置虚拟主机后，启动速度慢
apache配置虚拟主机后,启动速度慢且提示“the requested operation has failed” 可以通过在cmd下启动,来查找问题(命令中的“apache2.2”,是服务名,根据 ...

h5-5 canvas

h5-5 canvas的更多相关文章

随机推荐

热门专题