h5-4 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;}
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的更多相关文章
- 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 ...
随机推荐
- Android中设置全屏的方法
在实际的应用程序开发中,我们有时需要把 Activity 设置成全屏显示,一般情况下,可以通过两种方式来设置全屏显示效果.其一,通过在代码中可以设置,其二,通过manifest配置文件来设置全屏. 其 ...
- JavaScript操作DOM的那些坑
js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的“坑”. DOM的工作模式是:先加载文档的静态内容.再以动态方式对它们进行刷新,动态刷新不影响 ...
- Arduino+RFID RC522 +继电器
博客园的第一篇博文就献给Arduino了.不知道能不能坚持自己喜欢的并且记录下来. 起码是个好的开始. 想实现一卡通代替钥匙开启电动车. 简单的原理,通过RC522模块读取一卡通的序列号,在程序中进行 ...
- 转】MyEclipse使用总结——使用MyEclipse打包带源码的jar包
原博文出自于: http://www.cnblogs.com/xdp-gacl/p/4136303.html 感谢! 平时开发中,我们喜欢将一些类打包成jar包,然后在别的项目中继续使用,不过由于看不 ...
- 【原】Hadoop伪分布模式的安装
Hadoop伪分布模式的安装 [环境参数] (1)Host OS:Win7 64bit (2)IDE:Eclipse Version: Luna Service Release 2 (4.4.2) ( ...
- linux 课后作业
第一章 第一单元 : 安装linux 系统:已完成 第二单元: 略 第三单元: 1) 要求以root用户登录系统,右击桌面打开终端,查看当前登陆Linux系统所使用的用户名2) 查看哪些用户在系统上工 ...
- CCF 201312-1 出现次数最多的数 (水题)
问题描述 给定n个正整数,找出它们中出现次数最多的数.如果这样的数有多个,请输出其中最小的一个. 输入格式 输入的第一行只有一个正整数n(1 ≤ n ≤ 1000),表示数字的个数. 输入的第二行有n ...
- IP地址转换成Long型数字的算法
在应用程序开发中,涉及到IP地址的存储,大部分开发人员都将其存为String(或文本类型).能否将固定格式为m.n.x.y的IP地址转换成 Long型的数字呢?答案是肯定的.在数据库层面,可以直接将结 ...
- POJ 1005(累加)
/* * POJ_1005.cpp * * Created on: 2013年10月14日 * Author: Administrator */ #include <iostream> # ...
- IIS7 “拒绝访问临时目录”
创建 BlogConfigurationSettings 的配置节处理程序时出错: 拒绝访问临时目录.以其运行 XmlSerializer 的身份“IIS APPPOOL\5656qp.com.rmi ...