您好,欢迎来到化拓教育网。
搜索
您的当前位置:首页canvas绘制进阶

canvas绘制进阶

来源:化拓教育网

绘制折线

绘制思路:

先画一条线,确定原点和终点,然后再画一条线,从第一条线的终点开始到另一个点

绘制方法:

1)设置起点坐标值

moveTo(x,y);

2)设置终点(折点)坐标值

lineTo(x,y);

绘制线条的属性

1)设置线条的宽度,默认1px

lineWidth

2)设置线条端点的形状

lineCap

butt - 平角

round - 圆角

square - 正方向

3)设置两条线交点的形状

lineJoin

miter - 尖角

round - 圆角

bevel - 斜角

4)miterLimit - 配合lineJoin使用

绘制图片

!!!要点:必须要在图片准备完成后次啊能绘制图片到canvas上面

绘制图片代码

使用Chart,js绘制饼状图

<script src="Chart.js"></script>

必须导入Chart,js文件

然后把要制作的饼状图的canvas放在一个div里面,目的使用div的宽高来限制饼状图的大小

获得canvas的context对象,并初始化图表的data数据

最后根据文档创建图表对象

最后得到的饼状图

Copyright © 2019- huatuo9.cn 版权所有 赣ICP备2023008801号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务