JavaScript基础——使用Canvas画图

原创 2015年12月22日 17:02:05

HTML5的<canvas>元素提供了一组JavaScript API,让我们可以动态地创建图形和图像。图形是在一个特定的上下文中创建的,而上下文对象目前有两种。第一种是2D上下文,可以执行原始的绘图操作,比如:

1)设置填充、描边颜色和模式;

2)绘制矩形;

3)绘制路径;

4)绘制文本;

5)创建渐变和模式。

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

1)用GLSL编写的顶点和片段着色器;

2)支持类型化数组,即能够将数组中的数据限定为某种特定的数组类型;

3)创建和操作纹理。

目前,主流浏览器的较新版本大都已经支持<canvas>标签。同样地,这些版本的浏览器基本上也都支持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
 */
//目前只适合实验性地学习,不适合真正开发和应用。




JavaScript:使用Canvas绘图

1、基本用法 要使用元素,必须先设置其width和height属性,指定可以绘图的区域大小,出现在开始后结束标签中的内容是后备信息,如果浏览器不支持元素,就会显示这些信息。例如 A Drawing o...

JavaScript基础——使用Canvas绘图

HTML5添加的最受欢迎的功能就是元素。这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形。元素最早是由苹果公司推出的,当时主要用在其Dashboard中。...

Html5 Canvas+Javascript实现一个简单画图程序(一)

目标: 铅笔工具绘画,绘制常见几何形状(直线,矩形,圆形,多边形)。 实现: 画图的核心是依靠html5 的canvas标签,一个canvas的声明类似下面的形式:    这样就在你的h...

Html5 Canvas+Javascript实现一个简单画图程序(一)

目标: 铅笔工具绘画,绘制常见几何形状(直线,矩形,圆形,多边形)。 实现: 画图的核心是依靠html5 的canvas标签,一个canvas的声明类似下面的形式:    这样就在你的h...

javaScript & jquery完美判断图片是否加载完毕

------------------------------------------------------------- 众所周知,常见瀑布流当鼠标滚动到浏览器底部的时候,就会发起一个ajax...

js基础(使用Canvas画图)

HTML5的元素提供了一组JavaScript API,让我们可以动态地创建图形和图像。图形是在一个特定的上下文中创建的,而上下文对象目前有两种。第一种是2D上下文,可以执行原始的绘图操作,比如: 设...

Html5 Canvas+Javascript实现一个简单画图程序(三)

绘制几何图形   拿矩形举个例子吧,当鼠标在canvas按下的时候你记录下当前的坐标点,当鼠标拖动一段距离(但是不能拖出canvas),然后松开的时候再记录一个坐标,就可以计算出width和heig...

Html5 Canvas+Javascript实现一个简单画图程序(二)

上篇文章已经知道了绘制图形的基本代码了,但是还不能根据鼠标来绘制,本文将会介绍方法。 js的鼠标事件: 我们使用到了四个:mousedown(鼠标按下)mouseup(鼠标松开)mousemove...

Javascript canvas画图实例

Javascript canvas画图实例 *{margin:0;padding:0;} .fa{width:740px;margin:0 auto;} .top{margin:20px 0;}...
  • ljx008
  • ljx008
  • 2014年03月18日 16:30
  • 404

【Android】自定义View、画家(画布)Canvas与画笔Paint的应用——画图、涂鸦板app的实现

利用一个简单的画图app来说明安卓的图形处理类与自定义View的应用。 如下图,有一个供用户自己任意画图、涂鸦的app, 这里不做那么花俏了,仅提供黑白两色,但可以改变笔尖的粗细。 实质...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript基础——使用Canvas画图
举报原因:
原因补充:

(最多只允许输入30个字)