canvas标签
一:canvas标签的特点:
1·该标签是H5的新标签,IE8及以下的浏览器不支持该标签
2·该标签只是图形的容器,必须通过脚本语言js来绘制图形
3·该标签内的所有文本都会在不支持该标签的浏览器中显示
4·应用场景:游戏 / 可视化数据 / 多媒体 / banner广告
二:canvas标签的使用:
-
使用获取到该标签
-
调用getContext(‘2d’)方法返回一个对象,
该对象提供了一些在画布进行2d绘图的属性和方法
getContext(‘webgl’)进行立体绘图的属性与方法
-
根据文档选择合适的属性和方法来绘制图像
-
基本绘图命令:
- 设置开始绘图的位置: context.moveTo( x, y ).
- 设置直线到的位置: context.lineTo( x, y ).
- 描边绘制: context.stroke().
- 填充绘制: context.fill().
- 闭合路径: context.closePath().
- 开始路径: context.beginPath().
四:绘制矩形
-
fillstyle属性表示绘制图像的颜色
-
fillRect()绘制图像填充的矩形大小;
参数:fillRect(x坐标值,y坐标值,绘制图像的width,会制图像的height)
<canvas id="canv"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canv")
var ctx = canvas.getContext('2d')
ctx.fillStyle = '#FF0000';
ctx.fillRect(100, 100, 400, 800);
</script>
五:绘制线
-
moveTo()表示该线条开始的坐标
-
lineTo()表示该线条结束的坐标
-
stroke()是用来绘制线条的方法,即就是开始绘制
-
line.width设置线宽
-
line.Cap 设置线末端的类型
—butt(方形)
—round(圆角)
—square(突出圆角)
-
line.Join设置相交线的拐点
—bevel(平切)
—round(圆角)
—milter(直角)
<canvas id="mycanvas">该标签的直线和圆</canvas>
<script type="text/javascript">
var canva = document.getElementById("mycanvas")
var cte=canva.getContext('2d');
cte.moveTo(0,0);
cte.lineTo(200,300);
cte.stroke()
六:绘制圆
-
beginPath()起始一条路径(着手开始绘图)
-
1·参数:arc(圆中心的x坐标,中心的y坐标,半径,起始角度,结束角度,boolean值(false表示顺时;true表示逆时))
-
2·画圆时候将起始角定义为0,结束角设置为 2*Math.PI
<canvas id="mycanvas">该标签的直线和圆</canvas>
<script type="text/javascript">
var canva = document.getElementById("mycanvas")
var cte=canva.getContext('2d');
// 起始一条路径(着手开始绘图)
cte.beginPath();
/* 2·画圆时候将起始角定义为0,结束角设置为 2*Math.PI。*/
cte.arc(100,75,50,0,2*Math.PI);
cte.stroke()
</script>
七:==路径图==
```js
<canvas id="hello">该标签的路径</canvas>
<script type="text/javascript">
var can=document.getElementById("hello");
var tes=can.getContext("2d");
tes.beginPath();
//lineWidth属性表示路径的宽
// strokeStyle属性表示路径的颜色
tes.lineWidth="6"
tes.strokeStyle="blue"
tes.moveTo(0,80);
tes.lineTo(255,80);
tes.stroke();
tes.beginPath();
tes.strokeStyle="red"
tes.moveTo(255,0);
tes.lineTo(0,255);
tes.stroke();
</script>
八:文本
-
font属性指定文本的大小和样式
-
1·参数:strokeText(“文本” ,x轴坐标,y轴坐标)
2·作用:定义文本内容 ,strokeText()是空心文本;fillText()是实心文本
<canvas id="text"width="500" height="800">绘制文本失败</canvas>
var txt=document.getElementById("text")
var words=txt.getContext("2d");
words.font="50px '微软雅黑'";
words.strokeText("你好!李银河",100,100)
九:渐变
-
线条渐变步骤:
1·创建线条
- createLinearGradient()创建线条渐变
- 参数:createLinearGradient(开始x坐标,开始y坐标,结束x坐标,结束y坐标)
- 必须配合addColorStop()来设置渐变颜色的开始和结束
2·填充
<canvas id="line" width="200" height="100">绘制线条渐变失败</canvas>
var ls=document.getElementById("line");
var lin=ls.getContext("2d");
//创建渐变线条
var gre=lin.createLinearGradient(0,0,600,0);
gre.addColorStop(0,"red");
gre.addColorStop(1,"blue");
//使用渐变效果填充
lin.fillStyle=gre;
lin.fillRect(10,10,150,80);
-
径向渐变
1·创建线条
- createRadialGradient()创建径向渐变
- 参数:createRadialGradient(开始x坐标,y,半径,结束x坐标,y,半径)创建径向渐变
- 必须配合addColorStop()来设置渐变颜色和停止位置
2·填充
<canvas id="circle" width="200" height="100" style="border: 1px solid red;">绘制线条渐变失</canvas> var lc=document.getElementById("circle"); var cir=lc.getContext("2d"); var gir=cir.createRadialGradient(75,50,5,90,60,100); gir.addColorStop(0,"blue"); gir.addColorStop(1,"pink"); //使用渐变效果填充 cir.fillStyle=gir; cir.fillRect(10,10,150,80);