前端基础-HTML5（绘图）

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>