====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//重新给画布设置宽度,整个界面就清除了,也可以达到清除的效果