HTML5技术

html5 - canvas - zz77zz

字号+ 作者:H5之家 来源:博客园 2015-12-11 08:09 我要评论( )

canvas 简单部分就先不提了 就说说今天我遇到的一些问题,虽然简单,想总结一下后来看起来也方便 先附上一个chartjs(用canvas绘制图标的,方便) 官网: 使用方法: script src="Chart.js"/script var chart = new Chart(context); 接下来就是根据需求制定不同

canvas 简单部分就先不提了

就说说今天我遇到的一些问题,虽然简单,想总结一下后来看起来也方便 

先附上一个chartjs(用canvas绘制图标的,方便) 官网:

使用方法: <script src="Chart.js"></script>

var chart = new Chart(context);

接下来就是根据需求制定不同的表,不同的表定义数据的方法不同

看图片里会有demo

最后:chart.表名(你的数据存放的数组名);

 

接下来就是画圆时遇到的问题:

canvas绘制图片使用的drawImage()会有加载错误或者绘制错误(主要是chrome和firefox的问题)

解决办法:给你的img对象添加 加载函数

img.onload=function(){

  context.drawImage();

}

画布方法:

context.translate(x,y) 注意是相对上次位移

context.scale()  在原画板基础上缩小或放大

context.rotate(Math.PI/n);  相对原画板旋转

 

就这么多。。。。。。。。希望对一同学习的小伙伴们有些帮助

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

  • HTML5和CSS3 - 奔跑在起跑线佼佼者

    HTML5和CSS3 - 奔跑在起跑线佼佼者

    2017-04-20 13:00

网友点评
e