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绘制饼状图


chart.js官方文档:http://www.chartjs.org/docs/

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

必须导入Chart,js文件

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

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

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



最后得到的饼状图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,974评论 3 40
  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,731评论 2 32
  • 一、简介 HTML5 中的定义:“它是依赖分辨率的位图画布,你可以在 canvas 上面绘制任何图形,甚至加载照片...
    destiny0904阅读 10,608评论 1 4
  • 书中代码示例效果展示:Core HTML5 Canvas Examples 基础知识 canvas元素 canva...
    szu_bee阅读 2,893评论 2 28
  • 线条样式 绘制直线,第五章知识简单回顾 lineWidth 设置或返回当前的线条宽度,单位为像素 lineCap ...
    Zd_silent阅读 501评论 0 0