html5 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=gb2312" />
<title>无标题文档</title>
<style>
#c1{
background:#FFFFFF;
}
</style>
</head>
<script>
window.onload = function(){
var oc = document.getElementById('c1');
var ogc = oc.getContext("2d");//目前只有2d;3d效果需要参考webgl //ogc.strokeRect(50.5,50.5,100,100);//绘制出一个黑色边框的方块，无填充,当宽度，top值为50时，在浏览器显示2px的边框，设置为50.5border为1px； /* 绘制结果:边框2px红色，淡蓝色填充*/
/*
ogc.fillStyle="#33FFDD";//填充方块是淡蓝色的
ogc.strokeStyle="red";
ogc.lineWidth=2;//边线为2px
ogc.fillRect(50,50,100,100);//绘制出一个默认为黑色的方块
ogc.strokeRect(50.5,50.5,100,100);*/ /**绘制结果，边框四角变成圆角，弧形**/
/*ogc.fillStyle="#33FFDD";
ogc.strokeStyle="red";
ogc.lineWidth=10;
ogc.lineJoin="round";
ogc.fillStyle="#33FFDD";
ogc.fillRect(50,50,100,100);
ogc.strokeRect(50.5,50.5,100,100);*/ /**绘画出一个五边形的多边体，填充为红色**/
ogc.save();
ogc.beginPath();//开始绘画
ogc.fillStyle="red";
ogc.moveTo(100,100);
ogc.lineTo(200,200);
ogc.lineTo(300,200);
ogc.lineTo(300,80);
ogc.lineTo(240,150);
ogc.closePath();//自动闭合两线之间的距离
//ogc.stroke();//闭合绘画
ogc.fill();
ogc.restore(); /**绘画出一个5边多边形，填充颜色为黑色*/
ogc.beginPath();//开始绘画
ogc.moveTo(100,200);
ogc.lineTo(200,300);
ogc.lineTo(300,300);
ogc.lineTo(300,220);
ogc.lineTo(240,250);
ogc.closePath();
ogc.fill(); /**测试结果，蓝色的正方形框*/
ogc.save();
ogc.beginPath();
ogc.fillStyle="#00FF99";
ogc.rect(50,310,80,80);
ogc.closePath();
ogc.stroke();
ogc.fill();
ogc.restore();
//ogc.clearRect(0,0,oc.width,oc.height);//清除画布上的所有绘图 /**鼠标画图**/
oc.onmousedown = function(ev){// 鼠标按下事件
var ev = ev || window.event;//得到window对象
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(ev){
document.onmousemove = null;
document.onmouseup = null;
}
}; ogc.fillRect(0,0,20,20);//绘制一个方块
var num=0;
setInterval(function(){
num++;
ogc.clearRect(0,0,oc.width,oc.height);
ogc.fillRect(num,num,20,20);
},30); };
</script> <body style="background:#000000;">
<canvas id="c1" width="400" height="400">
<span>不支持浏览器时显示的文本信息</span>
</canvas>
<div style="background:#FFFFFF;height:auto;width:auto;">
<h1>canvas标签</h1>
<p>绘制环境：getContext("2d");//目前只支持2d的场景</p>
<p>绘制方块：fillRect(L,T,W,H);//默认颜色是黑色，L表示left值；T表示top值；W表示宽度；H表示高度。</p>
<p>strokeRect(L,T,W,H)；绘制边框的方块</p>
<p><h4>设置绘图：</h4></p>
<p>fillStyle:填充颜色，（绘制canvas是有顺序的）</p>
<p>lineWidth：线边框，是一个数值</p>
<p>strokeStyle：边线颜色</p>
<p><h4>边界绘制：</h4></p>
<p>lineJoin:边界链接点样式；miter:默认、round：圆角、bevel：斜角</p>
<p>lineCap:butt:默认、round：圆角、square:高度多出宽度一半的值</p>
<p><h4>绘制路径：</h4></p>
<p>beginPath:开始绘制路径</p>
<p>closePath:结束绘制路径</p>
<p>moveTo:移动到绘制的新目标</p>
<p>lineTo:新的目标点</p>
<p><h4>绘制路径：</h4></p>
<p>stroke:画线、默认黑色</p>
<p>fill:填充，默认为黑色</p>
<p>rect:矩形区域</p>
<p>save:保存路径</p>
<p>restore:恢复路径</p>
<p>clearRect：清除画布上的绘图</p>
<p></p>
</div>
</body>
</html>
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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{
background:#000000;}
#c1{
background:#FFFFFF;}
</style> </head> <body>
<canvas id="c1" width="400" height="400">
<span>浏览器不支持哦</span>
</canvas>
<div style="background:#CCCCCC;height:auto;">
<h1>绘制圆</h1>
<p>arc(x,y,半径,结束弧形,旋转方向)；x,y起始位置、弧度与角度的关系：弧度=角度*Math.Pi/180；旋转方向：顺时（默认false，逆时（true））</p>
</div>
</body>
<script type="text/javascript" defer="true">
window.onload = function(){
var oc = document.getElementById("c1");
var ogc = oc.getContext("2d");
toDraw(ogc,oc);
setInterval(toDraw,1000); /**绘画了一个90度圆*/
/*ogc.moveTo(200,200);//把路径移动到画布中的指定点，不创建线条
ogc.arc(200,200,150,0,90*Math.PI/180,false);
//ogc.closePath();//关闭绘画并且自动连接两点
ogc.stroke();//闭合绘画*/ function toDraw(){
var x = 200;
var y =200;
var r = 150;
ogc.clearRect(0,0,oc.width,oc.height);
var oDate = new Date();
var oHour = oDate.getHours();//获取小时
var oMin = oDate.getMinutes();//获取分
var oSen = oDate.getSeconds();//获取秒
var hourValue = (-90+oHour*30 + oMin/2)*Math.PI/180;//计算时针
var minValue = (-90+oMin*6)*Math.PI/180;//计算分针
var senValue = (-90+oSen*6)*Math.PI/180;//计算秒针
/**把圆分为60等份*/
for(var i = 0;i<60;i++){
ogc.beginPath();
ogc.moveTo(x,y);
ogc.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,true); ogc.stroke();
ogc.closePath(); }
/**将半径遮住*/
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();//填充当前绘图（路径） /**把圆分成20等份*/
ogc.lineWidth = 2;
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=4;
ogc.beginPath();
ogc.moveTo(x,y);
ogc.arc(x,y,r*12/20,hourValue,hourValue,false);
ogc.closePath();
ogc.stroke(); /**绘制分针*/
ogc.line=3;
ogc.strokeStyle="#AAAAAA";
ogc.beginPath();
ogc.moveTo(x,y);
ogc.arc(x,y,r*14/20,minValue,minValue,false);
ogc.closePath();
ogc.stroke(); /**绘制秒针*/
ogc.lineWidth=2;
ogc.strokeStyle="#77DDFF";
ogc.beginPath();
ogc.moveTo(x,y);
ogc.arc(x,y,r*16/20,senValue,senValue,false);
ogc.closePath();
ogc.stroke(); }
} </script>
</html>
做一个旋转的方块，方块可以缩放变换大小。
<body style="background:#000000;">
<canvas id="c1" width="400" height="400" style="background:#FFFFFF;">
<span>浏览器不支持哦</span>
</canvas>
<div style="height:auto;width:auto;background:#999999;">
<p>moveTo:定位开始绘制的坐标点</p>
<p>arcTo(x1,y1,x2,y2,r);x1,y1:第一组坐标；x2,y2:第二组坐标；r:半径</p>
<p>quadraticCurveTo(dx,dy,x1,y1):贝塞尔曲线:第一组控制点（类似于拉弓，往控制点方向拉弓）；第二组结束坐标</p>
<p>bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)贝塞尔曲线：第一组控制点，第二组控制点，第三组结束坐标。</p>
<p>translate(x,y):偏移，从起始点为基准点，移动到当前坐标位置。</p>
<p>rotate(x,y):旋转：参数为弧形</p>
<p>scale(x,y):缩放例子：旋转加缩放的小方块。</p>
</div>
</body>
<script>
window.onload = function(){
var oc = document.getElementById("c1");
var ogc = oc.getContext("2d");
//ogc.moveTo(100,200);//定位坐标
/**绘制出一个弧线*/
/*ogc.arcTo(50,50,200,150,50);
ogc.stroke();*/ /**绘制出一个弧线*/
/*ogc.quadraticCurveTo(200,200,200,100);
ogc.stroke();*/ /**绘制出一个弧线*/
/*ogc.bezierCurveTo(100,100,200,200,200,100);
ogc.stroke();*/ /**旋转45度缩小0.5的黑色小方块*/
/*ogc.translate(100,100);
ogc.rotate(45*Math.PI/180);//旋转45度
ogc.scale(0.5,0.5);//缩放 1:1为原始方块大小，0.5为缩小0.5
ogc.fillRect(0,0,100,100);//画出一个方块 默认黑色的*/ /**旋转的方块*/
var num=0;
var num2=0;
var value = 1;
//ogc.translate(100,100);
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>
html5 canvas标签的更多相关文章
- HTML5 canvas标签绘制正三角形 鼠标按下点为中间点，鼠标抬起点为其中一个顶点
用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...
- HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- HTML5<canvas>标签:简单介绍(0)
<canvas> 标签是 HTML 5 中的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件, 其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与c ...
- HTML5<canvas>标签:使用canvas元素在网页上绘制渐变和图像(2)
详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canva ...
- Html5——canvas标签使用
canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. canvas 元素本身是没有绘图能力的.所有的绘制工作必须在 JavaScript 内部完成 <script type=&q ...
- html5 canvas 标签
<canvas id="board" width="500" height="400"></canvas> < ...
- HTML5<canvas>标签:使用canvas元素在网页上绘制四分之一圆(3)
前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: <!doctype html> ...
- 自己写的HTML5 Canvas + Javascript五子棋
看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...
- html5 canvas 实现简单的画图
今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...
随机推荐
- BZOJ4538 : [Hnoi2016]网络
求出这棵树的dfs序,对于一条链$u-v$,假设$st[u]\leq st[v]$,那么一条链不经过点$x$当且仅当它满足下面任意一个条件: 1.$st[v]<st[x]$ 2.$st[u]&g ...
- ACM 疯牛
疯牛 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 农夫 John 建造了一座很长的畜栏,它包括N (2 <= N <= 100,000)个隔间,这些小 ...
- 【BZOJ2456】mode 神奇的卡内存题
以后把题解放在前面,估计没人看题解先看题... 内存1M,4个int(其实对内存的概念十分模糊),众数即为出现次数最多的数,可以用抵消的思想(但是众数不是可以是一大坨么...) #include &l ...
- SDL2.0学习
http://www.ffmpeg.org/download.html http://doc.okbase.net/leixiaohua1020/archive/110977.html //视频 h ...
- C++的STL中vector内存分配方法的简单探索
STL中vector什么时候会自动分配内存,又是怎么分配的呢? 环境:Linux CentOS 5.2 1.代码 #include <vector> #include <stdio ...
- EventToCommand is not found in MVVMLight
xmlns:Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP8& ...
- 9.20 java继承
package liu0920; //继承 public class Person { //属性 姓名和年龄 private String name; private int age; //无参构造方 ...
- js 节点属性
节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...
- js 时间格式化 -- 时间加减实现
时间格式化的方法: Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.ge ...
- ubuntu安装配置jdk tomcat mysql ...
安装之前大家一定要检查好各个版本问题 以免造成不兼容. (一)下载所需安装包: jdk-7u76-linux-x64.tar.gz apache-tomcat-7.0.63.tar.gz MySQL- ...