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. Python 爬虫系列

    爬虫简介 网络爬虫 爬虫指在使用程序模拟浏览器向服务端发出网络请求,以便获取服务端返回的内容. 但这些内容可能涉及到一些机密信息,所以爬虫领域目前来讲是属于灰色领域,切勿违法犯罪. 爬虫本身作为一门技 ...

  2. Elastisearch在kibana下常用命令总结

    1.获取所有数据 GET /_search 2.创建一个Document PUT /ecommerce/product/1 { "name" : "gaolujie ya ...

  3. idea或者java远程提交spark任务到yarn,Exception1

    spark通過idea远程提交job到yarn: Caused by: java.lang.ClassCastException: cannot assign instance of scala.co ...

  4. Openwrt_Linux_crontab任务_顺序执行脚本

    Openwrt_Linux_crontab任务_顺序执行脚本 转载注明来源: 本文链接 来自osnosn的博客,写于 2020-12-21. Linux (openwrt,debian,centos. ...

  5. #3使用html+css+js制作网页 番外篇 制作接收php

    使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...

  6. Java安全之RMI协议分析

    Java安全之RMI协议分析 0x00 前言 在前面其实有讲到过RMI,但是只是简单描述了一下RMI反序列化漏洞的利用.但是RMI底层的实现以及原理等方面并没有去涉及到,以及RMI的各种攻击方式.在其 ...

  7. Tomcat配置上遇到的一些问题

    Tomcat启动:在bin目录下双击startup.bat文件就行. 访问:在浏览器输入http://localhost:8080 回车访问的是自己 的界面: http://othersip:8080 ...

  8. 解决Cannot find module '@angular/compiler-cli'

    前言: 今天clone之前做的一个angular项目,使用ng serve一直提示An unhandled exception occurred: Cannot find module '@angul ...

  9. 【ORA】ORA-27125:unable to create shared memory segment

    在安装Oracle 10g的时候出现一个了错误,在网上总结了一下大牛写的文章 ORA-27125:unable to create shared memory segment 安装时出现这个错误安装会 ...

  10. 使用.net中的API网关模式封装微服务

    在本文中,我们将了解如何使用API网关模式来封装微服务并抽象出底层实现细节,从而允许使用者拥有进入我们系统的一致入口点. 为了构建和测试我们的应用程序,我们需要: 1.Visual Studio 20 ...