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

span{ color:white;}

</style>

<script>

window.onload = function(){

    var oC = document.getElementById('c1');//获取canvas元素

    var oGC = oC.getContext('2d');  //绘制环境目前只是2d环境，webgl : 3D绘图

};

</script>

</head>

<body>

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

    <span>不支持canvas浏览器</span>

</canvas> <!--默认：宽300 高150-->

</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;}

span{ color:white;}

</style>

<script>

window.onload = function(){

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

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

    oGC.fillRect(50,50,100,100);//填充

    oGC.strokeRect(50.5,50.5,100,100);//不填充，只画边框。

};

</script>

</head>

<body>

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

    <span>不支持canvas浏览器</span>

</canvas> <!--默认：宽300 高150-->

</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;}

span{ color:white;}

</style>

<script>

window.onload = function(){

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

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

    oGC.fillStyle = 'red';//填充的颜色

    oGC.strokeStyle = 'blue';//边框的颜色

    oGC.lineWidth = 10;

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

    oGC.strokeRect(50.5,50.5,100,100);

};

</script>

</head>

<body>

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

    <span>不支持canvas浏览器</span>

</canvas> <!--默认：宽300 高150-->

</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;}

span{ color:white;}

</style>

<script>

window.onload = function(){

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

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

    oGC.fillStyle = 'red';

    oGC.strokeStyle = 'blue';

    oGC.lineWidth = 10;

    oGC.lineJoin = 'bevel';//圆角

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

    oGC.strokeRect(50.5,50.5,100,100);

};

</script>

</head>

<body>

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

    <span>不支持canvas浏览器</span>

</canvas> <!--默认：宽300 高150-->

</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;}

span{ color:white;}

</style>

<script>

window.onload = function(){

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

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

    oGC.beginPath();

    oGC.moveTo(100,100);

    oGC.lineTo(200,200);

    oGC.lineTo(300,200);

    oGC.closePath();//起点和终点连接起来

    oGC.stroke();//画线：把点连接起来

    oGC.beginPath();

    oGC.moveTo(100,200);

    oGC.lineTo(200,300);

    oGC.lineTo(300,300);

    oGC.closePath();

    oGC.fill();//把点之间的位置填充

};

</script>

</head>

<body>

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

    <span>不支持canvas浏览器</span>

</canvas> <!--默认：宽300 高150-->

</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;}

span{ color:white;}

</style>

<script>

window.onload = function(){

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

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

    oGC.beginPath();

    oGC.rect(100,100,100,100);//绘制矩形

    oGC.closePath();

    oGC.fill();

    oGC.clearRect(0,0,oC.width,oC.height);  //擦出矩形区域

};

</script>

</head>

<body>

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

    <span>不支持canvas浏览器</span>

</canvas> <!--默认：宽300 高150-->

</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;}

span{ color:white;}

</style>

<script>

window.onload = function(){

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

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

    oGC.save();//save()和restore()之间的代码不会影响后面的

    oGC.fillStyle = 'red';

    oGC.beginPath();

    oGC.moveTo(100,100);

    oGC.lineTo(200,200);

    oGC.lineTo(300,200);

    oGC.closePath();

    oGC.fill();

    oGC.restore();

    oGC.beginPath();

    oGC.moveTo(100,200);

    oGC.lineTo(200,300);

    oGC.lineTo(300,300);

    oGC.closePath();

    oGC.fill();

};

</script>

</head>

<body>

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

    <span>不支持canvas浏览器</span>

</canvas> <!--默认：宽300 高150-->

</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;}

span{ color:white;}

</style>

<script>

window.onload = function(){

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

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

    oGC.lineWidth = 20;

    oGC.lineCap = 'square';//2端点的样式

    oGC.moveTo(100,100);

    oGC.lineTo(200,200);

    oGC.stroke();

};

</script>

</head>

<body>

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

    <span>不支持canvas浏览器</span>

</canvas> <!--默认：宽300 高150-->

</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;}

span{ color:white;}

</style>

<script>

window.onload = function(){

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

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

    oC.onmousedown = function(ev){

        var ev = ev || window.event;

        oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);//鼠标坐标是相对于屏幕的

        document.onmousemove = function(ev){

            var ev = ev || window.event;

            oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);

            oGC.stroke();//画线

        };

        document.onmouseup = function(){

            document.onmousemove = null;//取消事件

            document.onmouseup = null;

        };

    };

};

</script>

</head>

<body>

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

    <span>不支持canvas浏览器</span>

</canvas> <!--默认：宽300 高150-->

</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;}

span{ color:white;}

</style>

<script>

window.onload = function(){

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

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

    var num = 0;

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

    setInterval(function(){

        num++;

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

        oGC.fillRect(num,num,100,100);//矩形区域移动

    },30);

};

</script>

</head>

<body>

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

    <span>不支持canvas浏览器</span>

</canvas> <!--默认：宽300 高150-->

</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; width:300px; height:150px;}

span{ color:white;}

</style>

<script>

window.onload = function(){

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

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

    var num = 0;

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

};

</script>

</head>

<body>

<canvas id="c1">

    <span>不支持canvas浏览器</span>

</canvas> <!--默认：宽300 高150-->

</body>

</html>

h5-4 canvas的更多相关文章

  1. h5标签canvas关于getImageData跨域的问题

    h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...

  2. 关于h5绘制canvas生成图片的注意点！

    1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小, ...

  3. 关于H5的Canvas

    1.什么是canvas? <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布. canvas可以绘制路径.图形.字以及添加图像. ...

  4. HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

    Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...

  5. H5使用Canvas绘图

    一.什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的 ...

  6. 用H5的canvas做时钟

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

  7. H5 认识canvas

    不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. canvas提供了三 ...

  8. H5标签-canvas实现颜色拾取功能

    HTML5 <canvas> 标签是用于绘制图像,不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本(通常是 JS)来完成实际的绘图任务. &l ...

  9. H5之canvas简单入门

    <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 <canv ...

  10. H5的canvas绘图技术

    canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果. 1 ...

随机推荐

  1. java中子类与基类变量间的赋值

    Java中子类与基类变量间的赋值 子类对象可以直接赋给基类变量. 基类对象要赋给子类对象变量,必须执行类型转换, 其语法是: 子类对象变量=(子类名)基类对象名; 也不能乱转换.如果类型转换失败Jav ...

  2. 精美&创意的WordPress新发主题集合

    今天我整理了一些精美&创意的WordPress新发主题,它们基本上都融合了最新的设计理念,从简约到响应式,应有尽有. Engo – Smart & Minimal WordPress ...

  3. 重复安装Lync导致发布拓扑失败

    重复安装Lync会引起发布拓扑错误,主要原因就是Lync在域控服务器写了东西. 在出错日志中看到guid,查资料说到域控的CN=Trusted Services,CN=RTC Service,CN=S ...

  4. rabbitMQ 远程访问

    AMQP server localhost:5672 closed the connection. Check login credentials: Socket closed root@ruiy-c ...

  5. linux rar工具

    rar系统工具: wget http://www.rarlab.com/rar/rarlinux-3.8.0.tar.gz tar -zxvf rarlinux-3.8.0.tar.gz cd rar ...

  6. Tmux常用快捷键以及我会常到的一些问题汇总

    今天部署测试服务器环境 使用到了tmux 刚开始我把tmux想象成了像omzsh这种shell 但是被指出是错误的,tmux类似于在shell里面的软件.我还真是第一次接触到这个概念. 首先安装 br ...

  7. Java并发编程：Timer和TimerTask

    Java并发编程:Timer和TimerTask 下面内容转载自: http://blog.csdn.net/xieyuooo/article/details/8607220 其实就Timer来讲就是 ...

  8. 可迭代的集合类型使用foreach语句

    在学习算法这本书图论那一部分的时候,接触到了几个类似for(int w:G.adj(v)),的语句,不是很理解,就去百度,发现这是一种叫做foreach的语法,在书的76页有讲到,但是之前没认真看书, ...

  9. “IPSec 共享密钥”丢失。

    “IPSec 共享密钥”丢失.请验证您的设置并尝试重新连接. 但是这个vpn原来使用时不需要配置 共享的密钥,而且我也没有这个共享的密钥, 搜了下Mac OSX可以修改配置来绕过它. 在/etc/pp ...

  10. ajax提交后台自动反序列化成对象

    下面是ajax提交的方法,主要用到了$form.serializeArray()将表单序列化成json对象,然后用each处理一下,代码如下: var $form = $('<form>& ...