canvas简单操作

====canvas标签

1.Canvas是HTML5提供的一个标签,我们可以在这个盒子区域绘画

2.怎么绘画的呢? canvas对象有个一个方法可以让我们获取到一个CanvasRendderingContext2D对象,这个对象给我们提供了在canvas盒子上画图的功能.

3.不是所有的浏览器都支持canvas标签,几乎所有智能手机都支持这个标签

4.canvas市场:游戏,广告,动画,数据图形结合的复杂界面(可视化数据)

5.<canvas>浏览器不支持的时候,它就像个p标签的功能</canvas>

====线

1.设置宽高不要通过css设置,通过canvas对象的属性来设置

var canvasDOM=document.getElementById(‘canvas’);

canvasDOM.width=600;

canvasDOM.height=600;

2.获取画笔的方法:var pen=canvasDOM.getContext(‘2d’)

3.起点(没有起点的话,默认是轨迹的第一个终点)pen.moveTo(x,y)

4.轨迹:上一次的终点是下次轨迹的起点

pen.lineTo(x1,y1)

pen.lineTo(x2,y2)

pen.lineTo(x3,y3)

5.合并:不用写最后一条线的轨迹,直接从终点连线到起点

pen.closePath()

6.轨迹的颜色(不写默认黑色):pen.strokeStyle=’rgb(149,134,255)’//red,rgb(),rgba(),#521

7.轨迹的宽度(内外一半):pen.lineWidth=20;

8填充颜色:pen.fillStyle=’rgb(149,134,255)’//red,rgb(),rgba(),#521

9填充(只有封闭的填充才有效果,不写默认不填充,写了默认黑色):pen.fill()

10沿着轨迹绘制:只有轨迹是不行的,这一步才是真的绘制

pen.stroke()

< script >

var canvas = document. querySelector( "#canvas1");

var pen = canvas. getContext( '2d');

//产生随机颜色

var r = Math. round(( Math. random()* 255));

var g = Math. round(( Math. random()* 255));

var b = Math. round(( Math. random()* 255));

console. log( pen);

//设置canvas的宽高

canvas. width = 500;

canvas. height = 500;

canvas. style. border = '1px solid red';

//起点

pen. moveTo( 100, 100);

//终点

pen. lineTo( 100, 300);

//每一次的起点都是上一次的终点

pen. lineTo( 300, 300);

pen. lineTo( 300, 100);

//合并点

// pen.lineTo(100,100);

pen. closePath();

//轨迹的颜色

pen. strokeStyle = "rgb("+ r+ ","+ g+ ","+ b+ ")";

//轨迹的宽度 从一条线的中心线（基线）开始扩展宽度

pen. lineWidth = 20;

// //轨迹的填充颜色

pen. fillStyle = "rgb(100,100,100)";

pen. fill();

pen. stroke();

</ script >

11.新轨迹起点(第一个默认帮我们加了这个方法)

//一次轨迹会一次性按照自己的风格(线宽,填充,各种颜色)画完再画下一个轨迹

pen.beginPath()

pen.strokeStyle='red'

pen.moveTo(x,y).......

pen.stroke()

pen.beginPath()

pen.strokeStyle='blue'

pen.moveTo(x,y).......

pen.stroke()

//画一个简单的心电图或者股票涨幅图

< script >

var canvas = document. querySelector( "#canvas1");

var pen = canvas. getContext( '2d');

canvas. height = 600;

canvas. width = 600;

canvas. style. border = '1px solid red';

var index = 10;

pen. beginPath();

for( var i = 0; i<= 600; i++){

//绘制横线

pen. moveTo( 0, index* i);

pen. lineTo( 600, index* i);

//绘制竖线

pen. moveTo( index* i, 0);

pen. lineTo( index* i, 600);

}

pen. stroke();

//若不写beginPath 则会沿用上一套轨迹的样式

pen. beginPath();

//绘制x轴左箭头

pen. moveTo( 10, 10);

pen. lineTo( 0, 40);

//绘制x轴右箭头

pen. moveTo( 10, 10);

pen. lineTo( 20, 40);

//绘制x轴

pen. moveTo( 10, 300);

pen. lineTo( 10, 10);

//绘制y轴

pen. moveTo( 10, 300);

pen. lineTo( 550, 300);

//或者y轴上箭头

pen. lineTo( 510, 290);

//绘制y轴下箭头

pen. moveTo( 550, 300);

pen. lineTo( 510, 310);

pen. lineWidth = 3;

pen. stroke();

//绘制曲线：

pen. beginPath();

pen. moveTo( 10, 300);

pen. lineTo( 20, 200);

pen. lineTo( 30, 150);

pen. lineTo( 40, 500);

pen. lineTo( 50, 100);

pen. lineWidth = 2;

pen. strokeStyle = "blue";

pen. stroke();

</ script >

====弧线

pen.arc(x,y,r,起始角度,结束角度,逆顺时针);

pen.stroke();

//参数 x,y圆心 r半径 角度填弧度值(π:Math.PI) 逆顺时针填布尔值(可选)

< script >

var canvas = document. querySelector( "#canvas");

var pen = canvas. getContext( '2d');

canvas. width = 600;

canvas. height = 600;

canvas. style. border = '1px solid red';

//把画笔移动到300，300

pen. moveTo( 300, 300);

//求得一度的值

var deg = Math. PI/ 180;

//半径

var r = 100;

//求得ie终点的x和y

var ieX = 280- Math. sin( 31* deg)* r;

var ieY = Math. cos( 31* deg)* r+ 330;

pen. font = "20px Verdana, Geneva, sans-serif";

pen. fillText( "ie:7000000%", ieX, ieY);

//ie

pen. beginPath();

pen. arc( 300, 300, 100, 0, 242* deg);

pen. lineTo( 300, 300);

pen. fillStyle = "red";

pen. fill();

pen. stroke();

//chorm

pen. beginPath();

pen. moveTo( chormX, chormY);

pen. arc( 300, 300, 100, 242* deg, 349* deg);

var chormX = Math. sin( 349* deg)+ 300;

var chormY = Math. cos( 349* deg)+ 300;

pen. lineTo( 300, 300);

pen. fillStyle = "yellow";

pen. fill();

pen. stroke();

//现代。。

pen. beginPath();

pen. arc( 300, 300, 100, 349* deg, 356* deg);

pen. lineTo( 300, 300);

pen. fillStyle = "green";

pen. fill();

pen. stroke();

//其它

pen. beginPath();

pen. arc( 300, 300, 100, 356* deg, 360* deg);

pen. lineTo( 300, 300);

pen. fillStyle = "blue";

pen. fill();

pen. stroke();

</ script >

====文字

//文字的绘制不用加pen.stroke()

1.文字样式

pen.font = "30px Verdana, Geneva, sans-serif";

//font复合属性:以前css的font一样

2.绘制文字

pen.fillText(文字内容, x, y);//x,y起点

====矩形//矩形

pen.fillRect(x,y,w,h)

参数:x,y起点 w,h宽高

====清除区域

//清除

pen.clearRect(x,y,w,h)

参数:x,y起点 w,h宽高

//清屏

canvas.width=canvas.width//重新给画布设置宽度,整个界面就清除了,也可以达到清除的效果