HTML5的元素提供了一组JavaScript API，让我们可以动态地创建图形和图像。

图形是在一个特定的上下文中创建的，而上下文对象目前有两种。第一种是2D上下文，可以执行原始的绘图操作，

比如：

  1. 设置填充、描边颜色和模式；
  2. 绘制矩形；
  3. 绘制路径；
  4. 绘制文本；
  5. 创建渐变和模式。

第二种是3D上下文，即WebGL上下文。WebGL是从OpenGLES2.0移植到浏览器中的，而OpenGLES2.0是游戏开发人员在创建计算机图形图像时经常使用的一种语言。WebGL支持比2D上下文更丰富和更强大的图形图像处理能力，

比如：

  1. 用GLSL编写的顶点和片段着色器；
  2. 支持类型化数组，即能够将数组中的数据限定为某种特定的数组类型；

  3. 创建和操作纹理。

    目前，主流浏览器的较新版本大都已经支持标签。同样地，这些版本的浏览器基本上也都支持2D上下文。

但对于WebGL而言，目前还只有Firefox4+和Chrome支持它。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用Canvas绘图</title>

    <style>

        canvas{

            border: 1px solid dodgerblue;

        }

    </style>

</head>

<body>

<canvas id="drawing1" width="200" height="200">您的浏览器不支持canvas。</canvas>

<canvas id="drawing2" width="200" height="200">您的浏览器不支持canvas。</canvas>

<canvas id="drawing3" width="200" height="200">您的浏览器不支持canvas。</canvas>

<canvas id="drawing4" width="200" height="200">您的浏览器不支持canvas。</canvas>

<canvas id="drawing5" width="200" height="200">您的浏览器不支持canvas。</canvas>

<canvas id="drawing6" width="600" height="200">您的浏览器不支持canvas。</canvas>

<img src="result.png" id="result" hidden/>

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

</body>

</html>  
/**

 * 使用Canvas绘图

 */  

/**

 * 15.1 基本用法

 */

    //绘制图形

var drawing1=document.getElementById("drawing1");

//确定浏览器支持<canvas>元素

if(drawing1.getContext){

    var context1=drawing1.getContext("2d");

    var imageElem=document.getElementById("result");

    context1.drawImage(imageElem,10,10,180,180);

}  

/**

 *15.2 2D上下文

 */

//15.2.1 填充和描边

//15.2.2 绘制矩形

var drawing2=document.getElementById("drawing2");

if(drawing2.getContext){

    var context2=drawing2.getContext("2d");

    //绘制矩形

    context2.fillStyle="#ff0000";

    context2.fillRect(10,10,50,50);

    //绘制半透明的蓝色矩形

    context2.fillStyle="rgba(0,0,255,0.5)";

    context2.fillRect(50,50,50,50);

    //绘制红色描边矩形

    context2.strokeStyle="#ff0000";

    context2.strokeRect(130,10,50,50);

    //绘制半透明的蓝色描边矩形

    context2.strokeStyle="rgba(0,0,255,0.5)";

    context2.strokeRect(130,70,50,50);

    //描边线条的属性有lineWidth、lineCap、lineJoin

    context2.lineWidth=2;

    //在两个矩形重叠的地方清除一个小矩形

    context2.clearRect(50,50,10,10);

}

//15.2.3 绘制路径

//15.2.4 绘制文本

//15.2.5 变换

//绘制一个时钟表盘：

var drawing3=document.getElementById("drawing3");

if(drawing3.getContext){

    var context3=drawing3.getContext("2d");

    //开始路径

    context3.beginPath();

    //绘制外圆

    context3.arc(100,100,99,0,2*Math.PI,false);

    //绘制内圆

    context3.moveTo(194,100);

    context3.arc(100,100,94,0,2*Math.PI,false);

    //绘制文本

    context3.font="bold 14px Arial";

    context3.textAlign="center";

    context3.textBaseline="middle";

    context3.fillText("12",100,20);

    context3.fillText("3",180,100);

    context3.fillText("6",100,180);

    context3.fillText("9",20,100);

    //变换原点

    context3.translate(100,100);

    //旋转表针

    context3.rotate(1);

    //绘制分针

    context3.moveTo(0,0);

    context3.lineTo(0,-85);

    //绘制时针

    context3.moveTo(0,0);

    context3.lineTo(-65,0);

    //描边路径

    context3.stroke();

}

//15.2.6 绘制图像

//15.2.7 阴影

var context4=document.getElementById("drawing4").getContext("2d");

//设置阴影

context4.shadowOffsetX=5;

context4.shadowOffsetY=5;

context4.shadowBlur=4;

context4.shadowColor="rgba(0,0,0,0.5)";

//绘制红色矩形

context4.fillStyle="#ff0000";

context4.fillRect(10,10,50,50);

//绘制蓝色矩形

context4.fillStyle="rgba(0,0,255,1)";

context4.fillRect(30,30,50,50);

//15.2.8 渐变

var context5=document.getElementById("drawing5").getContext("2d");

var gradient=context5.createLinearGradient(30,30,70,70);

gradient.addColorStop(0,"white");

gradient.addColorStop(1,"black");

//绘制红色矩形

context5.fillStyle="#ff0000";

context5.fillRect(10,10,50,50);

//绘制渐变矩形

context5.fillStyle=gradient;

context5.fillRect(30,30,50,50);

//15.2.9 模式

var context6=document.getElementById("drawing6").getContext("2d");

var imageEle=document.getElementById("result");

var pattern=context6.createPattern(imageEle,"repeat");

//绘制矩形

context6.fillStyle=pattern;

context6.fillRect(0,0,560,150);

//15.2.10 使用图像数据

//getImageData()、putImageData()

//15.2.11 合成

//globalAlpha、globalCompositionOperation  

/**

 * 15.3 WebGL

 */

//目前只适合实验性地学习，不适合真正开发和应用。

感谢原作者的辛苦总结！

原文地址：

http://blog.csdn.net/bboyjoe/article/details/50381006

js基础（使用Canvas画图）的更多相关文章

  1. JS+HTML5的Canvas画图模拟太阳系运转

    查看效果:http://hovertree.com/texiao/html5/9.htm 地球自传 http://hovertree.com/texiao/html5/8.htm 代码如下: < ...

  2. html5之canvas画图基础

    HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...

  3. SVG和canvas画图，js求数组最大最小值

    windows命令行的内容怎么复制,右键选择标记,选中内容后再点击鼠标右键就复制了. 安装Node.js后再用npm install命令会出现如下warn:saveError ENOENT: no s ...

  4. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  5. Canvas画图在360浏览器中跑偏的问题

    问题描述,canvas画图的js代码中编写的是画正方形的代码,结果在360浏览器上变成了长方形,不知道怎么回事,请问各位大神是否遇到过此类问题? <!DOCTYPE html> <h ...

  6. qml基础学习 Canvas画笔

    一.画布元素 自qt4.7发布qml以来,qml也在一直不断的完善中,在qt4时代使用qml时如果需要异形图,那我们只能让设计师来切图,这样的感觉是很不爽的,总感觉开发没有那么犀利.但是到了qt5这一 ...

  7. h5 canvas 画图

    h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  8. Three.js基础

    Three.js基础探寻一 Three.js基础探寻一   1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了w ...

  9. Three.js基础探寻一

    1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SV ...

  10. Three.js基础探寻二——正交投影照相机

    本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...

随机推荐

  1. WebService的简单Demo

    看到招聘要求要会WebService.就百度看看是如何实现的. 测试了一下.发现使用webservice开发方法,好像方便了不少.服务端开发者只需要关注服务端就可以了. Demo结构 IWebServ ...

  2. Kubernetes项目简介

    Kubernetes项目简介 Kubernetes 是 Google 团队发起的开源项目,它的目标是管理跨多个主机的容器,提供基本的部署,维护以及运用伸缩,主要实现语言为 Go 语言.Kubernet ...

  3. 【老孟Flutter】Flutter 中与平台相关的生命周期

    老孟导读:关于生命周期的文章共有2篇,一篇(此篇)是介绍 Flutter 中Stateful 组件的生命周期. 第二篇是 Flutter 中与平台相关的生命周期, 博客地址:http://laomen ...

  4. java的多线程:java安全问题产生的原因与JMM的关系

    一.多线程产生安全问题 1.Java内存模型 共享内存模型指的就是Java内存模型(简称JMM),JMM决定一个线程对共享变量的写入时,能对另一个线程可见. 从抽象的角度来看,JMM定义了线程和主内存 ...

  5. 第9章 集合处理（数组、Map、Set）

    目录 1. 数组 1.1 创建数组 1.2 在数组两端添加删除元素 1.3 在数组任意位置添加.删除元素 delete删除数组元素无效 使用splice方法增.删.改元素 1.4 数组的常用操作 数组 ...

  6. Redis集群搭建与简单使用【转】

    Redis集群搭建与简单使用 安装环境与版本 用两台虚拟机模拟6个节点,一台机器3个节点,创建出3 master.3 salve 环境. redis 采用 redis-3.2.4 版本. 两台虚拟机都 ...

  7. Spark学习进度10-DS&DF基础操作

    有类型操作 flatMap 通过 flatMap 可以将一条数据转为一个数组, 后再展开这个数组放入 Dataset val ds1=Seq("hello spark"," ...

  8. 剑指offer 面试题10：斐波那契数列

    题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0).n<=39 编程思想 知道斐波拉契数列的规律即可. 编程实现 class Solu ...

  9. Linux复制某个目录下结构

    Linux复制某个目录下结构 ​结合tree命令把当前目录下的文件夹路径存储到document.txt文件,然后再使用mkdir命令把document.txt文件下的目录输入创建: tree -fid ...

  10. 文件监控性能问题【BUG】

    文件监控性能问题[BUG] 背景:JAVA写了一个文件夹目录监控的程序,使用的是org.apache.commons.io.monitor 包,项目稳定运行了一个月,现场反馈,文件夹数据处理越来越慢, ...