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. 解决使用Navicat等工具进行连接登录mysql的1130错误,无法使用Ip远程连接的问题(mysql为8.0版本)

    错误:ERROR 1130: Host '192.168.1.3' is not allowed to connect to thisMySQL serve 错误1130:主机192.168.1.3& ...

  2. TurtleBot3 Waffle （tx2版华夫）（5）激活你的雷达

    重要提示:请在配网通信成功后进行操作,配网后再次开机需要重新验证通信: 重要提示:[Remote PC]代表PC端.[TurtelBot]代表树莓派端: 5.1．操作步骤 1)[Remote PC]  ...

  3. CVE-2021-3019 漏洞细节纰漏

    CVE编号 CVE-2021-3019 lanproxy任意文件读取 该漏洞是2021年比较新的漏洞 是否需要认证:否 是否执行远程代码:否 是否执行远程命令:否 数据读取是否内网:否 漏洞软件介绍 ...

  4. skynet游戏服务器框架分享

    分享下我之前做的服务器框架;  游戏在线最高3万;  物理机I7的3台阿里云分服;性能及其强劲; 框架: 底层基于比较流行的skynet,基础采用c语言,脚本lua,部分服务golang; Skyne ...

  5. 设计模式之委派模式（Delegate Pattern）深入浅出

    学习目标:精简程序逻辑,提升代码的可读性. 内容定位:希望通过对委派模式的学习,让自己写出更加优雅的代码的人群. 委派模式定义: 委派模式(Delegate Pattern)的基本作用是负责任务的调度 ...

  6. 数据仓库组件：HBase集群环境搭建和应用案例

    本文源码:GitHub || GitEE 一.Hbase简介 1.基础描述 Hadoop原生的特点是解决大规模数据的离线批量处理场景,HDFS具备强大存储能力,但是并没有提供很强的数据查询机制.HBa ...

  7. Linux下Oracle 11G XE 安装笔记

    操作系统 [oracle@RAC02 ~]$ lsb_release -aLSB Version: :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:cor ...

  8. 【剑指 Offer】03.1.不修改数组找出重复的数字

    找出数组中重复的数字. 在一个长度为 n + 1 的数组 nums 里的所有数字都在 1-n 的范围内.所以数组中至少有一个是重复的.请找出数组中任意一个重复的数字. 示例 1: 输入: [2, 3, ...

  9. C中的dll 、lib和exe文件

    参考:链接1   链接2 DLL 动态链接库(Dynamic Link Library,缩写为DLL),运行时加载是一个可以被其它应用程序共享的程序模块,其中封装了一些可以被共享的例程和资源.动态链接 ...

  10. PAT甲级练习 1087 All Roads Lead to Rome (30分) 字符串hash + dijkstra

    题目分析: 这题我在写的时候在PTA提交能过但是在牛客网就WA了一个点,先写一下思路留个坑 这题的简单来说就是需要找一条最短路->最开心->点最少(平均幸福指数自然就高了),由于本题给出的 ...