1、Canvas绘图——JS绘图:
 <canvas id='c1' width='' height=''></canvas>
 * Canvas尺寸不能用CSS设置;
 c1.height=;
 c1.width=;
 var ctx=c1.getContext('2d');
 常用属性:
 ctx.fillStyle='#f00'/gradient;
 ctx.strokeStyle='#00f'/gradient;
 ctx.lineWidth=;
 ctx.font='px sans-sarfi';
 ctx.textBaseline='alphabetic';
 ctx.shadowBlur='';
 常用方法:
  绘制矩形:
   ctx.fillRect();
   ctx.strokeRect();
   ctx.clearRect();
  绘制文本:
   ctx.fillText();
   ctx.strokeText();
   ctx.measureText(txt).width;
2、Canvas绘图——绘制路径:
 作用:①创建选区(clip),对画布内容进行裁剪;
  ②进行描边(stroke),绘制任意形状的折线;
  ③进行填充(fill),填充出任意形状的图形;
 相关函数:
  ctx.beginPath();——开始一条新路径
  ctx.arc();——绘制一条椭圆/圆弧/圆路径
  ctx.moveTo(x,y);——移动到指定点
  ctx.lineTo(x,y);——从上一点到指定点绘制直线
  ctx.busierCurve();——绘制贝塞尔曲线
  ctx.closePath();——闭合路径
  ctx.clip();——基于当前路径进行裁切
  ctx.stroke();——基于当前路径进行描边
  ctx.fill();——基于当前路径进行填充
3、Canvas绘图——绘制图像:
 ①图像定位点位于自己左上角;
 ②绘制:
  ctx.drawImage(img,x,y);//原始大小绘制
  ctx.drawImage(img,x,y,w,h);//使用指定宽高绘制图像——图像大小缩放
 ③绘制图像时,必须等待图片异步加载完成:
  var img=new Image();
  img.src="xx.png";//向服务器异步请求图片
  img.onload=function(){
   ctx.drawImage(img,x,y,[w],[h]);
  }
  ④图象旋转:
   ctx.totate(deg);
  ⑤旋转轴点——默认坐标轴原点,若以某个固定点旋转,则须平移画布的坐标原点:
   ctx.translate(x,y);
4、基于Canvas的图表绘制框架/工具库:
 ①Chart.js——免费开源,九类图表
 ②Echart.js——免费,百度提供,中文手册
 ③FusionChart.js——收费,功能强大

HTML5_03之Canvas绘图的更多相关文章

  1. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  2. HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  3. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  4. 伙伴们休息啦canvas绘图夜空小屋

    HTML5 canvas绘图夜空小屋 伙伴们园友们,夜深了,休息啦,好人好梦... 查看效果:http://hovertree.com/texiao/html5/28/ 效果图如下: 代码如下: &l ...

  5. javascript的canvas绘图的基本用法

    <canvas>是HTML里面非常强大的元素,利用它结合js可以实现很多动画效果,大大增强交互性.下面,我想用图文并茂的方式阐述一下canvas的绘图机制的基础内容,话不多说,先上代码: ...

  6. canvas绘图、WebGL、SVG

    目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML ...

  7. HTML5 学习笔记(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  8. Canvas绘图基础(一)

    简单图形绘制 矩形:描边与填充 Canvas的API提供了三个方法,分别用于矩形的清除.描边及填充 clearRect(double x, double y, double w, double h) ...

  9. Canvas绘图中的路径描边与填充

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

随机推荐

  1. docker 1.8+之后ubuntu安装指定版本docker-engine

    这边记录ubuntu安装过程,首先是官网文档 If you haven’t already done so, log into your Ubuntu instance. Open a termina ...

  2. 移动web前端下拉刷新效果

    直接复制粘贴 放在页面中即可 <script> window.onload = function(){ window.addEventListener('touchstart', touc ...

  3. Bug管理系统 BugFree

    BugFree - 借鉴微软公司软件研发理念.免费且开放源代码.基于Web的精简版Bug管理系统 在线演示:http://www.bugfree.org.cn/demo/Login.php 其它项目管 ...

  4. LabVIEW 吸星大法 - 看见的好东西都是我的(上篇)

    前言 写了多年的LabVIEW程序,你是否面临这样的问题 总是在做一些重复的工作,感觉很没有意思: 总在不停的写代码,做类似的控件,实现相同的功能,丝毫没有成就感: 总在天加班,没有时间去提高自己; ...

  5. Allegro之Win7下不能实时刷新操作显示的问题

    Allegro软件主界面下: setup-> user preferences-> display->opengl中选定disable_opengl,即关掉OpenGL后,再重新启动 ...

  6. JSP实现在项目在网页上查询

    <table> <caption>user</caption> <tr> <td>编号</td> <td>姓名< ...

  7. USACO翻译:USACO 2012 JAN三题(1)

    USACO 2012 JAN(题目一) 一.题目概览 中文题目名称 礼物 配送路线 游戏组合技 英文题目名称 gifts delivery combos 可执行文件名 gifts delivery c ...

  8. Oracle EBS - Doc

    Oracle EBS spec.: http://vianet/IT/IT%20Dept/IT%20Project%20Update2/Active%20Projects%20%20Manufactu ...

  9. java 引入自定义字体font后出现的硬盘吃光的问题

    有个需求要用美术字体在图片上写字 用自定义的文字有两个方法: 1. Font dynamicFont = Font.createFont(Font.TRUETYPE_FONT, InputStream ...

  10. ABP理论学习之工作单元(Unit of Work)

    返回总目录 本篇目录 公共连接和事务管理方法 ABP中的连接和事务管理 仓储类 应用服务 工作单元 工作单元详解 关闭工作单元 非事务的工作单元 工作单元方法调用其它 工作单元作用域 自动保存 IRe ...