壹部分总计以及实例,遁地台风

By admin in 4858美高梅 on 2019年4月5日

(-1)写在前边

canvas对象arc函数的应用-遁地沙尘暴,canvasarc

(-壹)写在日前

作者用的是chrome49

<canvas id=”lol” height=”300″></canvas>

(壹)详细介绍

arc函数用来呈现圆的那有些

context.arc(100,100,50,Math.PI/6,Math.PI*2,false);

一,二 参数内定圆心,

三 参数内定半径,

四 参数钦命先河角度,五参数钦命停止角度

陆 参数为true逆时针画,false顺时针画,不传递为false

(-一)写在后面

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
</head>
<body>
<canvas id=”canvas” width=”400px” height=”400px”></canvas>
</body>
壹部分总计以及实例,遁地台风。<script type=”text/javascript”>
var canvas=document.getElementById(‘canvas’);
if(canvas==null){
return false;
}
var context=canvas.getContext(‘2d’);

自个儿用的是chrome4九

a.象限分布

 4858美高梅 1

本身用的是chrome4九

// context.fillRect(0,0,100,100);
// context.strokeRect(120,0,100,100);
//
// context.fillStyle=”red”;
// context.strokeStyle=”aqua”;
// context.fillRect(0,120,100,100);
// context.strokeRect(120,120,100,100);
//
// context.fillStyle=”rgba(255,0,0,0.2)”;
// context.strokeStyle=”rgba(255,0,0,0.2)”;
// context.fillRect(240,0,100,100);
// context.strokeRect(240,120,100,100);
// context.clearRect(50,50,240,120);

<canvas id=”lol” height=”300″></canvas>

example1

在圆明确的景况下,彰显圆的那有个别由起头角度、截至角度、画法决定

var context = lol.getContext(“2d”);

     context.beginPath();

     // context.arc(150,150,100,0,Math.PI/3,true);//1

     context.arc(150,150,100,0,Math.PI/3,false)//2

     context.stroke();

     context.closePath();

    

     context.beginPath();

     context.strokeStyle = “red”;

     context.moveTo(0,150);

     context.lineTo(300,150);

     context.moveTo(150,0);

     context.lineTo(150,300);

     context.closePath();

     context.stroke();

4858美高梅 24858美高梅 3

          (1)                    
(2)  

 

example2

假定在调用arc方法从前早已有子路径A,会从A的巅峰引一条直线连接arc方法所展现圆弧的源点

var context = lol.getContext(“2d”);

     context.beginPath();

     var value = 0;

     for(var i=0;i<4;i++)

     {

         context.arc(150,150,60,value,value+Math.PI/4,false);

//将false改成true你相会到更加好玩的

         value += Math.PI/2;

     }

     context.closePath();

     context.stroke();

    

     context.beginPath();

     context.strokeStyle = “red”;

     context.moveTo(0,150);

     context.lineTo(300,150);

     context.moveTo(150,0);

     context.lineTo(150,300);

     context.closePath();

     context.stroke();

 4858美高梅 44858美高梅 5

     
  第5个参数为false                第五个参数为true

(-一)写在前头 作者用的是chrome49 canvas id=”lol” height=”300″/canvas
(1)详细介绍 arc函数用来显示圆的…

<canvas id=”lol” height=”300″></canvas>

//context.arc(x,y,radius.atarAngle,anticlock,anticlockwise)
// x:圆心的x坐标
// y:圆心的y坐标
// straAngle:开端角度
// endAngle:停止角度
// anticlockwise:是不是逆时针(true)为逆时针,(false)为顺时针
//
// context.beginPath();
// context.arc(200,150,100,0,Math.PI*2,false);
// context.closePath();
// context.fillStyle=”orangered”;
// context.fill();

(一)详细介绍

(1)详细介绍

// var n=0;
// context.beginPath();
// context.arc(100,150,50,0,Math.PI/2,false);
// context.fillStyle=”orchid”;
// context.fill();
// context.strokeStyle=”chartreuse”;
// context.closePath();
// context.stroke();
//
// context.beginPath();
// context.arc(300,150,50,0,Math.PI/2,false);
// context.fillStyle=”orchid”;
// context.fill();
// context.strokeStyle=”chartreuse”;
// context.closePath();
// context.stroke();

arc函数用来显示圆的那部分

arc函数用来呈现圆的那部分

// 对于线段的绘图
// x:x坐标
// y:y坐标
// 每一趟画线都从moveTo的点到lineTo的点,
// 借使未有moveTo那么首先次lineTo的作用和moveTo1样,
//
每便lineTo后假使未有moveTo,那么下次lineTo的起始点为前2次lineTo的停止点

context.arc(100,100,50,Math.PI/6,Math.PI*2,false);

context.arc(100,100,50,Math.PI/6,Math.PI*2,false);

//
// context.beginPath();
// context.strokeStyle = “rgb(250,0,0)”;
// context.fillStyle = “rgb(250,0,0)”
// //实验申明第2次lineTo的时候和moveTo成效雷同
// context.lineTo(100, 100);
// //之后的lineTo会以上次lineTo的节点为开端
// context.lineTo(200, 200);
// context.lineTo(200, 100);
// context.moveTo(200, 50);
// context.lineTo(100,50);
// context.stroke();

一,2 参数钦命圆心,

一,二 参数钦点圆心,

//菊花图
// context.fillStyle=”cornsilk”;
// context.fillRect(0,0,400,300);
// var n=0;
// var dx=150;
// var dy=150;
// var s=100;
// context.beginPath();
// context.fillStyle=”darkorange”;
// context.strokeStyle=”black”;
// var x=Math.sin(0);
// var y=Math.cos(0);
// var dig=Math.PI/1511;
// for (var i=0;i<30;i++) {
// var x=Math.sin(i
dig);
// var y=Math.cos(idig);
// context.lineTo(dx+x
s,dy+y*s)
// }
// context.closePath();
// context.fill();
// context.stroke();

③ 参数钦命半径,

3 参数钦命半径,

  //绘制贝塞尔曲线context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 
  //绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)

四 参数内定发轫角度,5参数钦点结束角度

四 参数钦点发轫角度,五参数钦定结束角度

// cp一x:第叁个控制点x坐标
// cp一y:第三个控制点y坐标
// cp2x:第2个控制点x坐标
// cp贰y:第二个控制点y坐标
// x:终点x坐标
// y:终点y坐标
//
// qcpx:贰次样条曲线控制点x坐标
// qcpy:二回样条曲线控制点y坐标
// qx:3遍样条曲线终点x坐标
// qy:三遍样条曲线终点y坐标

6 参数为true逆时针画,false顺时针画,不传递为false

六 参数为true逆时针画,false顺时针画,不传递为false

// context.moveTo(50,50);
4858美高梅 ,// context.bezierCurveTo(50,50,150,50,150,150);
// context.stroke();
// context.quadraticCurveTo(150,250,250,250);
// context.stroke();

a.象限分布

 4858美高梅 6

a.象限分布

 4858美高梅 7

// context.fillStyle=”chocolate”;
// context.fillRect(0,0,400,300);
// var n=0;
// var dx=150;
// var dy=150;
// var s=100;
// context.beginPath();
// context.fillStyle=”cadetblue”;
// var x=Math.sin(0);
// var y=Math.cos(0);
// var dig =Math.PI/1511;
// for (var i=0;i<30;i++) {
// var x=Math.sin(i
dig);
// var y=Math.cos(i*dig);
// context.bezierCurveTo(dx + x * s, dy + y * s , dx + x * s , dy + y
* s, dx + x * s, dy + y * s)
// }
// context.closePath();
// context.fill();
// context.stroke();

example1

在圆显明的情形下,呈现圆的这有个别由起始角度、甘休角度、画法决定

var context = lol.getContext(“2d”);

     context.beginPath();

     // context.arc(150,150,100,0,Math.PI/3,true);//1

     context.arc(150,150,100,0,Math.PI/3,false)//2

     context.stroke();

     context.closePath();

    

     context.beginPath();

     context.strokeStyle = “red”;

     context.moveTo(0,150);

     context.lineTo(300,150);

     context.moveTo(150,0);

     context.lineTo(150,300);

     context.closePath();

     context.stroke();

4858美高梅 84858美高梅 9

          (1)                    
(2)  

 

example2

就算在调用arc方法从前已经有子路径A,会从A的巅峰引一条直线连接arc方法所展示圆弧的起源

var context = lol.getContext(“2d”);

     context.beginPath();

     var value = 0;

     for(var i=0;i<4;i++)

     {

         context.arc(150,150,60,value,value+Math.PI/4,false);

//将false改成true你会看出更加好玩的

         value += Math.PI/2;

     }

     context.closePath();

     context.stroke();

    

     context.beginPath();

     context.strokeStyle = “red”;

     context.moveTo(0,150);

     context.lineTo(300,150);

     context.moveTo(150,0);

     context.lineTo(150,300);

     context.closePath();

     context.stroke();

 4858美高梅 104858美高梅 11

     
  第几个参数为false                第伍个参数为true

example1

在圆明确的境况下,呈现圆的这部分由起先角度、甘休角度、画法决定

var context = lol.getContext(“2d”);

     context.beginPath();

     // context.arc(150,150,100,0,Math.PI/3,true);//1

     context.arc(150,150,100,0,Math.PI/3,false)//2

     context.stroke();

     context.closePath();

    

     context.beginPath();

     context.strokeStyle = “red”;

     context.moveTo(0,150);

     context.lineTo(300,150);

     context.moveTo(150,0);

     context.lineTo(150,300);

     context.closePath();

     context.stroke();

4858美高梅 124858美高梅 13

          (1)                    
(2)  

 

example2

如若在调用arc方法在此以前早已有子路径A,会从A的终端引一条直线连接arc方法所呈现圆弧的源点

var context = lol.getContext(“2d”);

     context.beginPath();

     var value = 0;

     for(var i=0;i<4;i++)

     {

         context.arc(150,150,60,value,value+Math.PI/4,false);

//将false改成true你碰面到更有意思的

         value += Math.PI/2;

     }

     context.closePath();

     context.stroke();

    

     context.beginPath();

     context.strokeStyle = “red”;

     context.moveTo(0,150);

     context.lineTo(300,150);

     context.moveTo(150,0);

     context.lineTo(150,300);

     context.closePath();

     context.stroke();

 4858美高梅 144858美高梅 15

     
  第陆个参数为false                第四个参数为true

//线性渐变var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)
// 线性渐变颜色lg.addColorStop(offset,color)

// xstart:渐变开端点x坐标
// ystart:渐变初阶点y坐标
// xEnd:渐变结束点x坐标
// yEnd:渐变截至点y坐标
//
// offset:设定的颜色离渐变甘休点的偏移量(0~1)
// color:绘制时要利用的颜色

// var gl=context.createLinearGradient(0,0,0,300)
//
// gl.addColorStop(0,”red”);
// gl.addColorStop(0.5,”black”);
// gl.addColorStop(1,”pink”);
//
// context.fillStyle=gl;
// context.fillRect(0,0,400,300);

//径向渐变rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)

// xStart:发散初步圆心x坐标
// yStart:发散开头圆心y坐标
// radiusStart:发散起初圆的半径
// xEnd:发散甘休圆心的x坐标
// yEnd:发散结束圆心的y坐标
//
// radiusEnd:发散截至圆的半径
// offset:设定的颜料离渐变截至点的偏移量(0~1)
// color:绘制时要选拔的颜料
// var gl=context.createRadialGradient(200,150,0,200,150,100)
// gl.addColorStop(0.1,”red”);
// gl.addColorStop(1,”lightblue”);
// context.fillStyle=gl;
// context.beginPath();
// context.arc(200,150,100,0,Math.PI*2,true);
// context.closePath();
// context.fill();

// var gl=context.createRadialGradient(100,150,10,300,150,50)
// gl.addColorStop(0.1,”red”);
// gl.addColorStop(1,”lightblue”);
// context.fillStyle=gl;
// context.fillRect(0,0,400,300);

// context.save();
// context.fillStyle=”chartreuse”;
// context.fillRect(0,0,400,300);
//
// context.fillStyle=”crimson”;
//
// context.translate(100,100);
// context.scale(0.5,0.5);
// context.rotate(Math.PI/4);
// context.fillRect(0,0,100,100);
//
// context.restore();
// context.save();
// context.fillStyle=”aqua”;
// context.translate(200,100);
// context.scale(0.8,0.8);
// context.rotate(Math.PI/4);
// context.fillRect(0,0,100,100);

</script>

</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有