绘制图片

一.绘制图片 context.drawImage()(即把图片放到canvas里)

var image = new Image();  // 先创建图片对象
image.src = '图片的位置';

1. context.drawImage(image,20,20);   //三个参数 1.图片 2.x轴位置 3.y轴位置  图片的原本大小

2. context.drawImage(image,0,0,300,400)  //5个参数 1.图片 2.x轴位置 3.y轴位置 4.绘制图片的宽度 5. 绘制图片的高度

3.context.drawImage(image,10,10,100,100,200,200,100,100); //9个参数 1.图片对象 2.3.4.5.个参数 我们截取部分的图片中的位置和大小
                                                                                                   6,7个参数是新图的位置 8,9, 截取后图片的大小

image.onload = function(){
context.drawImage(image,0,0,300,400);  // 5个参数 1.图片 2.x轴位置 3.y轴位置 4.绘制图片的宽度 5. 绘制图片的高度

二.改变图片像素的颜色  context.putImageData()

概念:对imagedata数组中的各个像素的r、g、b、a值进行修改,再调用putImageData方法进行绘制;

绘制文字

填充文字: context.fillText(text,x,y)      // 实心文字                  x:文字起点的x坐标轴     y:文字起点的y坐标轴 

绘制文字轮廓 : context.strokeText(text,x,y)  // 空心文字          

绘制文字样式:context.font:'40px Arial';  // 40px大小的Arial

水平对齐方式:  context.textAlign: ( start、end、right、center);  

垂直对齐方式:  context.textBaseline( top、hanging、middle、alphabetic、ideographic、bottom);

 下面是代码和 输入的样式:

context.font = '40px Arial';
var text = 'fill 的例子演示';
context.fillText(text,100,100);
context.strokeText(text,100,150);

储存

context.save():调用该方法,会保存当前context的状态、属性(把他理解成游戏存档)

恢复

context.restore():调用该方法就能恢复到save时候context的状态、属性(游戏回档)

绘制贝赛尔曲线

context.bezierCurveTo(x1,y1,x2,y2,x3,y3);    // (x1,y1)第一个控制点 (x2,y2)第二个控制点 (x3,y3)锚点

绘制二次样条曲线

context.quadraticCurveTo(x1,y1,x2,y2);   //  (x1,y1)控制点 (x2,y2)锚点

图片的平铺

context.createPattern(image, no-repeat || repeat-x || repeat-y || repeat) ;

no-repeat  不平铺  repeat-x 沿x轴平铺  repeat-y 沿y轴平铺  reoeat 全图平铺

图片的剪裁

context.clip()  //只绘制封闭路径区域内的图像,不绘制路径外部图像,用的时候 1.先创建裁剪区域 2.再绘制图像

HTML5 中的 canvas 画布(二)的更多相关文章

  1. HTML5 中的 canvas 画布(一)

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  2. HTML5中的canvas基本概念及绘图

    * Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的 ...

  3. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  4. HTML5中的Canvas详解

    什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...

  5. HTML5入门十一---Canvas画布实现画图(二)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. HTML5中的 Canvas

    什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...

  7. HTML5中的Canvas

    1.Canvas标签的宽高一定要设置在标签上或者采用js添加属性,如果用css去设置的话,会把画布被拉伸,相当于将默认的画布拉伸到指定位置.默认为300px*100px; <canvas wid ...

  8. HTML5中的Canvas和SVG

    Canvas 和 SVG 都允许我们在浏览器中创建图形,但是它们在根本上是不同的. 1 SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中 ...

  9. 第七讲:HTML5中的canvas两个小球全然弹性碰撞

    <html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jsce ...

随机推荐

  1. Docker--在Docker中运行应用

    Docker--在Docker中运行应用 一个交互式的容器 既然在Docker提供的是一个容器,底层支撑着一个基本的操作系统环境,那我们就可以通过Docker进入到容器内部与系统进行交互. 据我理解: ...

  2. jpa

    学习尚硅谷jpa笔记: 所依赖的jar包: 首先在META-INF下创建配置文件,persistence.xml <?xml version="1.0" encoding=& ...

  3. HTMl5的存储方式sessionStorage和localStorage详解

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

  4. C#进阶系列——WebApi 接口测试工具:WebApiTestClient

    前言:这两天在整WebApi的服务,由于调用方是Android客户端,Android开发人员也不懂C#语法,API里面的接口也不能直接给他们看,没办法,只有整个详细一点的文档呗.由于接口个数有点多,每 ...

  5. 【C#】类单例 可以解决全局变量的问题

    单件模式(Singleton):保证一个类仅有一个实例,并提供一个访问它的全局访问点. 知道 详解

  6. ABBA BABA statistics

    The ABBA BABA statistics are used to detect and quantify an excess of shared derived alleles, which ...

  7. sass接触

    第一句话就是棒棒的,我爱上了. 看了真阿当的文章:<2016年前端技术观察> http://weibo.com/ttarticle/p/show?id=230940405256054051 ...

  8. 以最简单方式学习Linux

    有很多关于Linux的书籍,博客.大多数都会比较"粗暴"的将一大堆的命令塞给读者,从而使很多.NET程序员望而却步.未入其门就路过了. 所以我设想用一种更为平滑的学习方式, 就是在 ...

  9. 简单的Linux的用户权限管理

    企业生产环境用户权限集中管理方案案例 建立中要添加如下的项目经验: 在了解公司业务流程后,提出权限整改解决方案,改进公司超级用户Root权限泛滥的问题. 我首先写好方案后,给老大看,取得老大的支持后, ...

  10. 换肤系统(oocss方式)

    近期想做一个换肤系统,参考过Bootstrap系统,思前想后,内容不难,但就是理不清楚,主要是换肤系统的css如何设计,怎样设计可重用性最好,后期更方便修改和维护,还有一个最头疼的就是怎么给css进行 ...