1、Canvas元素
介绍:canvas是HTML5新增的专门用来绘制图形的元素,canvas元素是一块无色透明的区域,开发者需要通过js脚本在元素中绘图;
可以在canvas标签中可以设置宽高;
绘制图的步骤:
1、在HTML5中添加canvas元素,设置宽高、ID
2、通过js找到与之对应的ID:
var c=document.getElementById(“myCanvas”);
3、通过canvas元素的getContext方法来获取其上下文,即创建Context对象,获取进行绘制的2D环境;
var context=c.getContext(“2D”);
4、使用js脚本来进行绘制
如:context.fillStyle=’#ff0000’;
context.fillRect(50,25,100,50);
实战(canvas画直线)
JavaScript脚本里
window.functiion(){
var canvas=document.getElementById(“myCanvas”);//通过ID获取canvas元素
var c=canvas.getContext(“2d”);//获取进行绘制的2D环境;
c.beginPath();//开始绘图
c.moveTo(50,c.height/2);//设置直线的起点
c.lineTo(80,c.height/2);//设置直线的终点
c.lineWidth=10;//设置直线的宽度
c.strokeStyle=“green”;//设置直线的颜色,默认为黑色
c.lineCap=“round”;//设置直线的样式,有butt、round、square,默认为butt;
c.stroke();//将图绘制出来;
c.closePath();//结束绘图
}
实战(canvas画直线交叉处)
JavaScript脚本里
window.functiion(){
var canvas=document.getElementById(“mycanvas2”);
var c2=canvas.getContext(“2d”);
c2.beginPath();//开始绘图
c2.moveTo(10,10);//直线起点
c2.lineTo(100,90);//直线交叉处
c2.lineTo(190,10);//直线终点
c2.lineWidth=“10”;//直线宽度
c2.lineJoin=“bevel”;//直线交叉处的样式,默认为miter尖角,还有round圆润,bevel缺省
c2.stroke();//添加到页面上
c2.closePath();//结束绘图
}
实战(canvas画曲线)
window.functiion(){
var canvas=document.getElementById(“mycanvas2”);
var c2=canvas.getContext(“2d”);
c2.beginPath();//开始绘图
c2.moveTo(20,20);//直线起点
c2.lineTo(100,20);//直线终点
c2.arcTo(150,20,150,90,50);//画曲线,从100,20的位置画到180,90的位置,半径为20;
c2.lineTo(150,90);//接着画直线到150,90;
c2.lineWidth=“10”;
c2.stroke();//将图绘制出来;
c2.closePath();
}
实战(canvas画二次贝塞尔曲线)
window.functiion(){
var canvas=document.getElementById(“mycanvas2”);
var c2=canvas.getContext(“2d”);
c2.beginPath();//开始绘图
c2.moveTo(20,20);//直线起点
c2.quadraticCurveTo(150,120,200,10);//画曲线,从20,20的位置到150,120的位置,再到200,10的位置
c2.lineWidth=“10”;
c2.stroke();
c2.closePath();
}
实战(canvas画三次贝塞尔曲线)
window.functiion(){
var canvas=document.getElementById(“mycanvas2”);
var c2=canvas.getContext(“2d”);
c2.beginPath();//开始绘图
c2.moveTo(0,0);//直线起点
c2.bezierCurveTo(60,200,120,0,180,10);//画曲线,从0,0的位置到60,120的位置,再到120,0的位置,再到180,10的位置
c2.lineWidth=“10”;
c2.stroke();
c2.closePath();
}
实战(canvas画矩形)
window.functiion(){
var cxt=document.getElementById(“mycanvas”);
var c=cxt.getContext(“2d”);
c.beginPath();
c.rect(10,10,50,30);//设置矩形的左上角顶点的坐标在10,10处,矩形的宽高为50,30;
c.lineWidth=“2”;//边框为2;
c.strokeStyle=“green”;//设置直线的颜色,默认为黑色
c.fillStyle="#FF0000";//设置填充色,默认无填充色;
c.fill();//上面只是设置了填充色,并没有真正的填充,只有调用了fill()方法才会真正的填充;
c.stroke();
c.closePath();
}
实战(canvas画圆)
window.functiion(){
var cxt=document.getElementById(“mycanvas”);
var c=cxt.getContext(“2d”);
c.beginPath();
c.fillStyle="#FF0000";//填充色
c.arc(50,50,50,0,Math.PI*2,true);//(圆心距左上角顶点50,50,半径50,从0度开始2个180度‘Math.PI表示180度’,true表示逆时针方向,false表示顺时针方向)
c.shadowColor="#110000";//设置阴影颜色;
c.shadowBlur=20;//数字越大越模糊;
c.shadowOffsetX=10;//设置x轴的偏移量;
c.shadowOffsetY=10;//设置y轴的偏移量;
c.globalAlpha=0.5;//透明度设置,在0-1之间;
c.fill();//真正填充的方法;
c.stroke();
c.closePath();
}
实战(canvas线性渐变)
window.functiion(){
var cxt=document.getElementById(“mycanvas”);
var c=cxt.getContext(“2d”);
c.beginPath();
var clg=c.createLinearGradient(0,0,100,0);//渐变的起点0,0 渐变的终点100,0表示水平渐变;
//(0,0,0,100)表示垂直渐变;(0,0,100,100)表示45度渐变;
clg.addColorStop(0,"red");//定义开始的位置颜色为红;
clg.addColorStop(0.5,"blue");//定义中间的位置颜色为蓝;
clg.addColorStop(1,"green");//定义最后的位置颜色为绿;
c.fillStyle=clg;//设置填充色;
c.fillRect(10,10,100,100);//设置矩形左上角在10,10宽高100,100
c.fill();//真正填充的方法;
c.stroke();
c.closePath();
}
实战(canvas径向渐变)
window.functiion(){
var cxt=document.getElementById(“mycanvas”);
var c=cxt.getContext(“2d”);
c.beginPath();
var clg=c.createRadialGradient(50,50,20,50,50,40);//圆心坐标50,50半径20
//第二个圆心的坐标50,50半径40
clg.addColorStop(0,"red");//定义开始的位置颜色为红;
clg.addColorStop(0.5,"blue");//定义中间的位置颜色为蓝;
clg.addColorStop(1,"green");//定义最后的位置颜色为绿;
c.fillStyle=clg;//设置填充色;
c.fillRect(10,10,100,100);//设置矩形左上角在10,10宽高100,100
c.fill();//真正填充的方法;
c.stroke();
c.closePath();
}
2、SVG元素
在页面里写:
<svg height=“190” width=“200”>
<polygon points=“100,10 40,180 190,60 10,60 160,180”
style=“fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;” />
/提前计算好图形的顶点位置,points:此属性定义构成多边形的一系列的点,每一个点由两个用逗号分隔的数字构成,第一个数字表示x轴坐标,第二个数字表示y轴坐标,点与点之间用空格分隔。fill定义填充的颜色stroke:此属性定义折线描边的颜色。stroke-width:此属性定义折线的粗细。/
</svg>