绘制线条
1.绘制方法
设置起点坐标值
moveTo（x,y）设置终点（折点）坐标值
lineTo（x,y）
2.绘制线条属性设置线条宽度，默认1px
context.lineWidth = 5;设置线条端点样式
context.lineCap = "butt/round/square";
butt - 平角
round - 圆角
square - 正方向设置折点的样式
context.lineJoin = "miter/round/bevel";
miter - 尖角
round - 圆角
bevel - 斜角-
miterLimit
- 配合miter使用
context.lineJoin = "miter" - 该属性值设置尖角延伸范围
context.miterLimit = 20;
代码示例：
<body>
<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
<script type="text/javascript">
var context = document.getElementById("canvas").getContext("2d");
context.beginPath();
context.moveTo(20,20);
context.lineTo(100,100);
context.lineTo(30,10);
context.lineWidth = 20;
context.lineCap = "square";
context.lineJoin = "miter";
context.miterLimit = 20;
context.strokeStyle = "red";
context.stroke();
</script>
- 配合miter使用
绘制图片
1.绘制图片
drawImage(img,x,y)
img - 当前加载的图片
x和y - 图片左上角的位置
2.平铺图片
var ptn = createPattern(img,type)
img : 平铺的图片
type: 平铺的方式
repeat/no-repeat/repeaet-x/repeat-y
3.切割图片
clip()
代码示例
<body>
<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
<script type="text/javascript">
var context = document.getElementById("canvas").getContext("2d");
var img = new Image();
img.src = "class.jpg";
img.onload = function(){ //必须要保证图片加载完毕(onload事件)后，再绘制图片
context.drawImage(img,10,10);//按照原图形大小加载
//var ptn = context.createPattern(img,"repeat-x"); //创建平铺对象
//context.fillStyle = ptn; //将平铺对象作为填充颜色
//context.fillRect(0,0,400,400)； //绘制
}
context.beginPath();
//指定路径
context.arc(192/2,168/2,80,0,2*Math.PI);
//裁剪图片
context.clip();
</script>
画布方法
1.缩放
scale(x,y)
x，y,width,height都按照比例进行缩放
x和width: 按照第一个参数的比例缩放
y和height: 按照第二个比例缩放
2.改变参考点
translate(x,y)
context.translate(tx,ty);
context.fillRect(x,y,width,height);
tx和ty改变了矩形的x和y的参考点，也可以改变旋转的中心点
3.旋转
rotate(degrees * Math.PI/180)
degrees:代表想要旋转的角度
正数:顺时针
4.保存当前画布属性、状态
save()
5.恢复画布属性状态
resotre()
饼状图
<script src="Chart.js"></script>
var data = {//各种颜色对应的内容，也会改变鼠标放上去以后显示的内容
labels: [ ],
datasets: [//数据配置，对应的是一个数组，该数组里可以有多个对象，每个一个对象都是一个圆
{
data: [600, 50, 100],//每个分类所占的大小
backgroundColor: [ "red","black","white"],//每个分类的颜色
hoverBackgroundColor:[ ]//鼠标悬停以后该分类的颜色
}]
};
//创建图表对象，
//参数1 ：画布对象
//参数2: 数据和配置信息
var myPieChart = new Chart(context,{
type:"pie",
data:data
});