1.创建路径绘制线条(直线和折线、多边形)
1. 绘制方法
绘制之前要调用beginPath
1）设置起点坐标值
moveTo(x,y);
2）设置终点(折点)坐标值
lineTo(x,y);
2. 绘制线条的属性
1）设置线条的宽度，默认1px
lineWidth
2）设置线条端点的形状
lineCap
butt - 平角
round - 圆角
square - 正方向
3）设置两条线交点的形状
lineJoin
miter - 尖角
round - 圆角
bevel - 斜角 canvas
4）miterLimit - 配合lineJoin使用
lineJoin设置为miter，该属性值设置尖角延伸范围
2.绘制图片
1、 按照图片原大小加载
drawImage(img,x,y)
img - 当前加载的图片
x和y - 图片左上角的位置
注意： 必须要保证图片加载完毕(onload事件)后，再绘制图片
2. 平铺图片
var ptn = createPattern(img,type) 返回一个平铺对象，将这个对象作为将要绘制图像的填充颜色
img : 平铺的图片
type: 平铺的方式
repeat/no-repeat/repeaet-x/repeat-y
注意：必须要保证图片加载完毕(onload事件)后，再绘制图片，createPattern也要等到图片加载完毕后执行
<canvas id="canvas" width="400px" height="400px" ></canvas>
<script type="text/javascript">
var painter=document.getElementById("canvas").getContext("2d");
var img=new Image();
img.src="class.jpg";
//创建平铺对象
img.onload=function(){
var pat=painter.createPattern(img,"repeat");
//将平铺对象作为填充颜色
painter.fillStyle=pat;
painter.fillRect(0,0,400,400);
}
</script>
绘制图片
3.切割图片
使用clip()切割图片
<canvas id="canvas" width="400px" height="400px"></canvas>
<script type="text/javascript">
var painter=document.getElementById("canvas").getContext("2d");
var img=new Image();
img.src="class.jpg";
img.onload=function(){
painter.drawImage(img,0,0);
}
painter.beginPath();
// painter.rect(0,0,100,100);
painter.arc(96,84,84,0,2*Math.PI);
//指定路径开始裁剪
painter.clip();//反向选择裁剪图片
切割图片
4.画布缩放旋转
1、 scale(x,y); - 缩放
x - 水平方向上的缩放
y - 初值方向上的缩放
2、translate(x,y) - 重新映射画布上的（0,0）位置
3、rotate(); 旋转画布
degrees * Math.PI / 180;
4、 save() 保存当前画布属性、状态
5、 resotre() 恢复画布属性状态
5.用chart.js绘制图
<script type="text/javascript" src="Chart.js"></script>//首先导入Chart.js文件
<div id="" style="width:300px;height:300px;">
<!--想要进一步设置图表的宽和高，需要再设置canvas的宽和高-->
<canvas id="canvas" width="400px" height="400px"></canvas>
</div>
<script type="text/javascript">
var painter=document.getElementById("canvas").getContext("2d");
// For a pie chart
/*
*new chart(ctx,{})
* 参数1：画布对象
* 参数2：数据和配置信息
* */
var data = {
//对应每一个分类的内容
labels: [
"black",
"Blue",
"Yellow"
],
//表单的数据信息
datasets: [
{ //所占的大小
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
var myPieChart = new Chart(painter,{
type: 'pie',
data: data,
// options: options
});
</script>
圆饼图
