canvas 2
来源:互联网 发布:软件开发工具有哪些 编辑:程序博客网 时间:2024/06/15 17:32
canvas
绘制圆形:
arc(x,y,半径,起始弧,结束弧,旋转方向)
-- X,Y:圆心坐标;
--弧度与角度的关系:弧度=角度*Math.PI/180 -->PI 是大写
--旋转方向:顺时针(默认:false),逆时针(true)
示例:
<script>
window.onload=function(){
var oc=document.getElementById('c');
var ocg=oc.getContext('2d');
ocg.arc(150,150,150,0,360*Math.PI/180,true);
ocg.stroke();
}
</script>
vanvas 绘制钟表:
<!DOCTYPE html >
<head>
<title>canvas</title>
<meta charset="UTF-8">
<script>
window.onload=function(){
var oc=document.getElementById('c');
var ocg=oc.getContext('2d');
function toDraw(){
var X=200;
var Y=200;
var r=150;
ocg.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;
ocg.beginPath();
for (var i = 0; i <60; i++) {
ocg.moveTo(X,Y);
ocg.arc(X,Y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false)
}
ocg.closePath();
ocg.stroke();
ocg.fillStyle='white'
ocg.beginPath();
ocg.moveTo(X,Y);
ocg.arc(X,Y,r*19/20,0,360*Math.PI/180,false)
ocg.closePath();
ocg.fill();
ocg.lineWidth=3;
ocg.beginPath();
for (var i = 0; i <12; i++) {
ocg.moveTo(X,Y);
ocg.arc(X,Y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false)
}
ocg.closePath();
ocg.stroke();
ocg.fillStyle='white'
ocg.beginPath();
ocg.moveTo(X,Y);
ocg.arc(X,Y,r*18/20,0,360*Math.PI/180,false)
ocg.closePath();
ocg.fill();
ocg.lineWidth=5;
ocg.beginPath();
ocg.moveTo(X,Y);
ocg.arc(X,Y,r*10/20,OhoursValue,OhoursValue,false)
ocg.closePath();
ocg.stroke();
ocg.lineWidth=3;
ocg.beginPath();
ocg.moveTo(X,Y);
ocg.arc(X,Y,r*14/20,oMinValue,oMinValue,false)
ocg.closePath();
ocg.stroke();
ocg.save();
ocg.lineWidth=1;
ocg.strokeStyle='red'
ocg.beginPath();
ocg.moveTo(X,Y);
ocg.arc(X,Y,r*19/20,oSenValue,oSenValue,false)
ocg.closePath();
ocg.stroke();
ocg.restore();
}
setInterval(toDraw,1000)
toDraw();
}
</script>
<style type="text/css">
#c{
background:white;
}
</style>
</head>
<body style='background:black'>
<!-- <div id="div1" data-trr="abc"></div> -->
<canvas id="c" width="1000px" height="600px">你的浏览器不支持canvas</canvas>
</body>
</html>
绘制弧线
arcTo(X1,Y1,X1,Y2,半径)
-- X1,Y1:第一个点坐标;起始点
-- X2,Y2:第二个点坐标;
<script>
window.onload=function(){
var oc=document.getElementById('c');
var ocg=oc.getContext('2d');
ocg.moveTo(100,200)
ocg.arcTo(100,100,200,100,50)
ocg.stroke();
}
</script>
绘制贝赛尔曲线:
方法1.quadraticCurveTo(dx,dy,x1,y1)
--dx,dy -->第一组控制点
--x1,y1-->第二组结束坐标
window.onload=function(){
var oc=document.getElementById('c');
var ocg=oc.getContext('2d');
ocg.moveTo(100,200);
ocg.quadraticCurveTo(100,100,200,100);
ocg.stroke();
}
</script>
方法2.bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
--dx1,dy1 -->第一组控制点
--dx2,dy2 -->第二组控制点
--x1,y1-->第三组结束坐标
window.onload=function(){
var oc=document.getElementById('c');
var ocg=oc.getContext('2d');
ocg.moveTo(100,200);
ocg.bezierCurveTo(100,100,200,200,200,100);
ocg.stroke();
}
</script>
变换:
1.translate(x,y) -->偏移 :从起始点为基准点,移动当前坐标位置,绘制在它后的图形才会偏移,前面的不会偏移
var oc=document.getElementById('c');
var ocg=oc.getContext('2d');
ocg.translate(100,100);
ocg.fillRect(0,0,100,100);
1.rotate(角度*Math.PI/180) -->旋转:参数为弧度-->以左上角为中心旋转
var oc=document.getElementById('c');
var ocg=oc.getContext('2d');
ocg.translate(100,100);
ocg.rotate(30*Math.PI/180)
ocg.fillRect(0,0,100,100);
1.scale(宽的缩放比例,高的缩放比例) -->缩小放大 :按原来的大小的倍数进行缩小和放大
var oc=document.getElementById('c');
var ocg=oc.getContext('2d');
ocg.translate(100,100);
ocg.rotate(30*Math.PI/180)
ocg.scale(2,2)
ocg.fillRect(0,0,100,100);
旋转的小方块:
<script>
window.onload=function(){
var oc=document.getElementById('c');
var ocg=oc.getContext('2d');
var num=0;
setInterval(function(){
num++;
ocg.save() ;
ocg.clearRect(0,0,oc.width,oc.height) ;
ocg.translate(300,300);
ocg.rotate(num*Math.PI/180);
ocg.translate(-50,-50);
ocg.fillRect(0,0,100,100);
ocg.restore();
},30)
}
</script>
旋转的放大的小方块:
<script>
window.onload=function(){
var oc=document.getElementById('c');
var ocg=oc.getContext('2d');
var num=0;
var num2=0;
var value=1;
setInterval(function(){
num++;
ocg.save() ;
ocg.clearRect(0,0,oc.width,oc.height) ;
ocg.translate(300,300);
if (num2==100){
value=-1
}else if(num2==0){
value=1
}
num2+=value;
ocg.scale(num2*1/50,num2*1/50)
ocg.rotate(num*Math.PI/180);
ocg.translate(-50,-50);
ocg.fillRect(0,0,100,100);
ocg.restore();
},30)
}
</script>
0 0
- canvas 2
- canvas(2)
- Android4.2源码View.draw(Canvas canvas)中canvas分析
- HTML5 Canvas-Oreilly.Canvas.Pocket.Reference (2)
- HTML5 canvas 2
- canvas 绘制图形2
- html5笔记2 canvas
- HTML5--canvas笔记(2)
- html5-canvas-太阳系2
- canvas八卦图2
- canvas图像2
- canvas碰撞检测2
- canvas时钟2
- HTML5 Canvas (2)
- canvas元素示例2
- HTML5 Canvas笔记 -- 2
- JavaScript-2-6:canvas
- canvas的绘图2
- Chem 3D软件中背景怎么改变
- 遗传算法原理+程序案例详解
- 以太网帧类型总结
- jersey的过滤器
- 第13章上机
- canvas 2
- VC++ 使用MSComm控件检测串口是否存在的方法
- 建造者模式(java版)
- HTML基础之label标签
- 安卓开发的基本常识
- ionic——npm安装不成功问题
- 使用JCreator进行servlet程序的开发
- C# ORM—Entity Framework 之Code first(代码优先)(二)
- C#入门经典第6版学习 五