汗，不小心点击发布了。其实正在编辑中。。。。。。

　HTML Canvas是现代浏览器中非常棒的绘图技术，Canvas可以绘制图形，操作图片，制作游戏，创建动画等；Canvas是很容易使用的，下面我们来认识它吧。

在Web领域中，SVG，Canvas，CSS3均可以绘制图像，他们的区别主要在于：

Canvas：

  • 依赖分辨率。Canvas本质上是一个能够绘图的图像元素。
  • 在行为上类似于<img>的单纯的HTML元素
  • 通过js脚本编程来创建和修改。
  • canvas输出的是一整幅画布

SVG：

  • 不依赖分辨率。SVG元素类似于HTML元素。
  • 通过css或js脚本编程来创建和修改。
  • svg绘制出来的每一个图形元素都是独立的DOM节点，可方便后期绑定事件或修改。

CSS：

  • CSS可以定义DOM元素的样式，使用CSS3可以创建动画。
  • DOM也可以结合JavaScript来实现动画

那么什么情况下使用Canvas？对图表、绘画、动态图像，还有视频游戏，Canvas都是非常适合的。

CANVAS--浏览器兼容性

IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
7.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+

注：IE7和IE8需要第三方库：explorercanvas。IE9支持<canvas>

canvas标签

　　首先创建一个canvas元素：

<canvas width="500" height="500"></canvas>

新建的canvas什么内容也没有，一片空白，我们可以用它绘制了。

var canvas = document.getElementById('canvas');

Canvas是HTML元素，可以通过getElementById获取其DOM。

var c = canvas.getContext('2d');

通过画布的 getContext() 方法获得的一个“绘图环境”对象。getContext方法指定参数2d，表示该canvas对象用于生成2D图案（即平面图案）。如果参数是3d，就表示用于生成3D图像（即立体图案），这部分实际上单独叫做WebGL API（本书不涉及）。

基本绘制方法

1.绘制矩形

1.1fillRect

<!doctype html>

<html>

<body>

<canvas width="500" height="500" id="canvas"></canvas>

<script>

var canvas = document.getElementById('canvas');

var c = canvas.getContext('2d');

c.fillStyle = "red";

c.fillRect(100,100,100,100);

</script>

</body>

</html>

fillRect(x, y, width, height)方法用来绘制矩形，它的四个参数分别为矩形左上角顶点的x坐标、y坐标，以及矩形的宽和高。fillStyle属性用来设置矩形的填充色。

1.2

strokeRect
c.strokeStyle = "blue";

c.lineWidth = "2.0";

c.strokeRect(100,100,50,50);

strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。strokeStyle()方法定义描边颜色，lineWidth定义宽度。

clearRect方法用来清除某个矩形区域的内容。

c.clearRect(0,0,canvas.width,canvas.height);

2.绘制路径

c.fillStyle = "#4321fe";

c.beginPath();

c.moveTo(50,50);

c.lineTo(200,50);

c.lineTo(150,150);

c.closePath();

c.fill();

beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，closePath方法用来将路径闭合，fill方法用来填充。

3.绘制文本

http://modernweb.com/2013/08/19/best-of-javascript-html-css-week-of-august-12-2013/

http://www.html5tricks.com/demo/100-css3-animated-icon/index.html

http://www.sitepoint.com/html5-canvas-tutorial-introduction/

http://diveintohtml5.info/canvas.html#divingin

http://javascript.ruanyifeng.com/htmlapi/canvas.html

贝塞尔曲线

http://www.cnblogs.com/doudougou/archive/2012/04/26/2472048.html

http://www.cnblogs.com/lhb25/archive/2011/04/12/1964343.html

http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html

http://www.cnblogs.com/lixlib/archive/2012/12/17/2821338.html

http://www.cnbeta.com/articles/176994.htm

http://www.html5tricks.com/8-html5-canvas-animation.html

http://javascript.ruanyifeng.com/htmlapi/canvas.html

http://joshondesign.com/p/books/canvasdeepdive/chapter03.html

http://joshondesign.com/p/books/canvasdeepdive/toc.html

http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html

http://codepen.io/katydecorah/pen/zxBRKv

http://codepen.io/picks/4/

http://codepen.io/JFarrow/pen/XJKOjJ

http://codepen.io/ZCKVNS/pen/vEXqoM

http://codepen.io/Alireza29675/pen/KwgwMy

http://codepen.io/Tyriar/pen/eKlzx

http://codepen.io/luckyyang/pen/loCBq

http://codepen.io/cathbailh/pen/wBBNWW

http://codepen.io/rlemon/pen/qhHIn

http://codepen.io/alikhalilifar/pen/CcHqg

http://codepen.io/ZCKVNS/pen/vEXqoM

ctx.save

ctx.translate

ctx.rotate

ctx.drawImage

ctx.restore

在web中绘制图像 -- canvas篇的更多相关文章

  1. iOS：quartz2D绘图（处理图像,绘制图像并添加水印）

    绘制图像既可以重写drawRect:方法并在该方法中绘制,也可以不用重写该方法,它有封装好的函数获取自己的图像绘制上下文,即UIGraphicsBeginImageContext(CGSize siz ...

  2. QPinter 常用绘制图像的方法

    阅读本文大概需要 3 分钟 我们在开发软件的过程中,绘制图像功能必不可少,使用 Qt 绘制图像时非常简单,只需要传递几个参数就可以实现功能,在 Qt 中绘制图像的 api有好几个 void drawI ...

  3. QPainter 绘制图像接口

    阅读本文大概需要 3 分钟 我们在开发软件的过程中,绘制图像功能必不可少,使用 Qt 绘制图像时非常简单,只需要传递几个参数就可以实现功能,在 Qt 中绘制图像的 api有好几个 void drawI ...

  4. Google earth engine 绘制图像间散点图

    这段代码实现了在Google earth engine中绘制图像/波段间的散点图,得到相关关系.适用于探究数据间的相关性,进行数据的交叉验证. 代码来源于官方帮助:https://developers ...

  5. 【Canvas】311- 解决 canvas 在高清屏中绘制模糊的问题

    点击上方"前端自习课"关注,学习起来~ 一.问题分析 使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊.如图: 因为 canvas 不是矢量图,而是像图片一样 ...

  6. html5新特性canvas绘制图像

    在前端页面开发过程中偶尔会有需要对数据进行相应的数学模型展示,或者地理位置的动态展示,可能就会想到用canvas,网上有很多已经集成好的,比如说类似echarts,确实功能非常强大,而且用到了canv ...

  7. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  8. Javascript高级编程学习笔记（90）—— Canvas(7) 绘制图像

    绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...

  9. HTML5 在canvas中绘制复杂形状

    作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/32942667 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,画图环 ...

随机推荐

  1. vi/vim 中批量在行插入或删除指定字符

    1. 在每行的行首行尾插入指定字符      行首::%s/^/insert_word/ 行尾::%s/$/insert_word/  2. 在某些行的行进行替换       在2~50行首添加//号 ...

  2. 《javascript设计模式》笔记之第五章：单体模式

    一:单体的基本结构: 最简单的单体,实际就是一个对象字面量: var Singleton = { attribute1: true, attribute2, method1: function() { ...

  3. Apache的多处理模块MPM

    本博文主要参数 Apache 2.2文档以及Apache模块开发指南 Apache的整个运行可以分为两个阶段:启动阶段和运行阶段. 在启动阶段时,它以ROOT特权来启动,进行解析配置文件(一般就是ht ...

  4. Java之final、static关键字及匿名对象

    个人通俗理解: 1.final:首先被final修饰的变量就自动变成的不能被修改的常量了.被修饰的类会自动变成太监类,只能有父类,不能有子类:被修饰的方法也不能被子类重写了:被修饰的引用变量值也不能更 ...

  5. LR中订单流程脚本

    Action(){ /* 主流程:登录->下订单->支付订单->获取订单列表 定义事物 1)登录 2)下订单 3)支付订单 4)获取订单列表 接口为:application/json ...

  6. codevs 1146 ISBN号码

    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver 题目描述 Description 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1 ...

  7. Window10 开启传统启动界面

    Windows 10沿袭了Windows 8的快速启动,导致在启动过程中无法通过按F8进入启动选项,这样当系统遇到问题无法进入时根本无法通过进入安全模式等方式进行处理(当然通过其他一些工具还是能够引导 ...

  8. RSA不对称加密和公钥 私钥

    理论上只要有加密的规则 基本都是可以解密的 但是如果解密需要消耗的时间过长 比如1000年 解密过后已经没什么意义了 此时可认为这种算法不能被破解 也就是说此加密可信 MD5 是一种单向操作 加密后不 ...

  9. spark简单入门

    本文由cmd markdown编辑,原始链接:https://www.zybuluo.com/jewes/note/35032 RDD是什么? RDD是Spark中的抽象数据结构类型,任何数据在Spa ...

  10. table 会有默认的外边框，内部会有分割线

    .表格中边框的显示 只显示上边框 <table frame=above> 只显示下边框 <table frame=below> 只显示左.右边框 <table frame ...