HTML5 Canvas 2D绘图

为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处。LaplaceDemon/ShiJiaqi。

http://www.cnblogs.com/shijiaqi1066/p/4851774.html

 

 

 

Canvas

Canvas标签,用于在web中绘制各种图形。Canvas为基于像素的绘图,绘制的图像是位图。也即Canvas绘图的基本单位是像素。Canvas是一个相当于画板的html节点,用js操作绘图。

 

Canvas特点

  • 依赖分辨率。
  • 不支持事件处理器。
  • 弱的文本渲染能力。
  • 能够以 .png 或 .jpg 格式保存结果图像。
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘。

 

一、Canvas基础

若浏览器不支持HTML5的 <canvas>标签。则把不支持信息写在<canvas></canvas>之间。

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <canvas id="myCanvas" width="600" height="300">
        你的浏览器还不支持哦
    </canvas>
</body>
</html>

不建议使用CSS来制定canvas的width,height。因为canvas不光需要指定其dom的宽高,还需要指定canvas内部画布分辨率的大小。

<canvas>标签,有两个基本属性:height 与width。当两个属性的值改变时,该画布上的任何绘图都会擦除掉。

  • height的默认值是 150。
  • width默认值是 300。

 

 

1. Canvas绘图初步

cancas的2d绘图对象的全称为CanvasRenderingContext2D对象。CanvasRenderingContext2D理解为canvas的画笔。

使用canvas dom对象的 getContext() 方法并把"2d"作为方法参数,从而获取CanvasRenderingContext2D对象。无论调用多少次getContext()方法,获取的对象都都是相同的。

var canvas=document.getElementById("myCanvas");
var context = canvas.getContext("2d");

 

canvas的基本用法是:设置绘画动作,执行绘画动作。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <canvas id="myCanvas" width="800" height="800" style="border: 1px solid black">
        你的浏览器还不支持哦
    </canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        // 状态设置
        context.moveTo(100,100);
        context.lineTo(700,700);

        // 绘制
        context.stroke();
    </script>
</body>
</html>

绘图结果:

 

 

2. Canvas Context 的属性

fillStyle 属性:用来填充路径的当前的颜色、模式或渐变。这个属性可以设置为一个字符串或者一个 CanvasGradient 对象 或 CanvasPattern 对象。当设置为一个字符串时,它被解析为一个 CSS 颜色值并且用来进行实心填充。当设置为一个 CanvasGradient 或 CanvasPattern 对象,通过使用指定的渐变或模式来完成填充。

globalAlpha 属性:指定在画布上绘制的内容的不透明度。这个值的范围在 0.0(完全透明)和 1.0(完全不透明)之间。默认值为 1.0。

globalCompositeOperation 属性:指定颜色如何与画布上已有的颜色组合(合成)。

lineCap 属性:指定线条的末端如何绘制。合法的值是 "butt"、"round" 和 "square"。默认值是 "butt"。

lineJoin 属性:指定两条线条如何连接。合法的值是 "round"、"bevel" 和 "miter"。默认值是 "miter"。

lineWidth 属性:指定了画笔(绘制线条)操作的线条宽度。默认值是 1.0,并且这个属性必须大于 0.0。较宽的线条在路径上居中,每边有线条宽的一半。

miterLimit 属性:当 lineJoin 属性为 "miter" 的时候,这个属性指定了斜连接长度和线条宽度的最大比率。如需更多细节,请参阅 miterLimit 属性参考页。

shadowBlur 属性:指定羽化阴影的程度。默认值是 0。阴影效果得到 safari 的支持,但是并没有得到 FireFox 1.5 或 Opera 9 的支持。

shadowColor 属性:把阴影的颜色指定为一个 CSS 字符串或 Web 样式字符串,并且可以包含一个 alpha 部分来表示透明度。默认值是 black。阴影效果得到 Safari 的支持,但是并没有得到 FireFox 1.5 或 Opera 9 的支持。

shadowOffsetX, shadowOffsetY 属性:指定阴影的水平偏移和垂直偏移。较大的值使得阴影化的对象似乎漂浮在背景的较高位置上。默认值是 0。阴影效果得到 Safari 的支持,但是并没有得到 FireFox 1.5 或 Opera 9 的支持。

strokeStyle 属性:指定了用于画笔(绘制)路径的颜色、模式和渐变。这个属性可能是一个字符串,或者一个 CanvasGradient 对象 或 CanvasPattern 对象。如果是一个字符串,它被解析为一个 CSS 颜色值,并且画笔用所得的实色来绘制。如果这个属性的值是一个 CanvasGradient 对象或 CanvasPattern 对象,画笔使用这个渐变或模式来实现。

 

 

3. Canvas Context 实例的绘图方法

绘制路径

beginPath() :beginPath() 丢弃当前定义的路径,开始一条新的路径。

closePath() :绘制路径结束,它会绘制一个闭合的区间,添加一条起始位置到当前坐标的闭合曲线。

moveTo(x,y) :设置绘图起始坐标。

lineTo(x,y) :从最后一点到点(x,y)绘制一条直线。

arc(x,y,radius,startAngle,endAngle,anticlockwise) :绘制中心点在(x,y)的弧,半径为radius,角度在[startAngle,endAngle]之间(角度单位为弧度)。anticlockwise为布尔类型,若为true表示逆时针;若为false表示顺时针。

arcTo(x1, y1, x2, y2, radius) :创建两切线之间的弧/曲线。圆弧是半径为radius的圆的部分。该圆弧有一个点与当前位置到P1(x1,y1)的线段相切,还有一个点和从P1(x1,y1)到P2(x2,y2)的线段相切。这两个切点就是圆弧的起点和终点,圆弧绘制的方向就是连接这两个点的最短圆弧的方向。

bezierCurveTo(c1x,c1y,c2x,c2y,x,y) :使用控制点(c1x,c2y)和(c2x,c2y)从最后一点到点(x,y)绘制一条三次贝塞尔曲线。

quadraticCurveTo(cx,cy,x,y) :控制点(cx,cy)从最后一点到点(x,y),绘制一条贝塞尔曲线。

rect(x,y,width,height) :为当前路径添加一条矩形路径。矩形是路径的一个子路径,没有和路径中的任何其他子路径相连。当 rect() 方法返回时,当前位置是 (0,0)。

stroke() :渲染路径。

 

说明:

调用beginPath()方法表示新路径的开始。

调用closePath(),表示路径闭合。

beginPath()方法与closePath()方法不一定要成对出现。当不需要使绘图路径封闭,可以不使用closePath,仅仅可以使用beginPath开始下一段路径的绘制。

如果路径已经闭合,可以调用 fill()方法用fillStyle填充它。调用 fill()方法时,canvas会自动将未封闭的路径封闭。

调用clip(),根据路径创建一个剪裁区域。

isPointInPath(x,y) 判断路径是否存在于路径之上。该方法在路径关闭之前调用。

 

 

绘制矩形

clearRect(left,top,width,height) :清除指定的矩形区域。

strokeRect(left,top,width,height) :绘制矩形框。无填充色。框的颜色由strokeStyle属性指定。strokeStyle属性默认为黑色('#000000')。

fillRect(left,top,width,height) :绘制内部填充颜色的矩形。填充颜色由fillStyle属性指定。fillStyle属性默认为黑色('#000000')。

 

 

绘制文本

文本绘制API不一定在浏览器中有实现。

fillText(text,x,y) :绘制实心文字。

stokeText(text,x,y) :绘制空心文字。

绘制文本的context属性:

  • font
  • textAlign
  • textBaseline

fill(),stroke(),clip() 在完成绘制的最后的填充和边界轮廓,剪辑区域。

 

 

使用图片

使用drawImage() 方法可以把图片绘制到画布上。该方法有有3个变形。

drawImage(image, x, y) :把整个图像复制到画布,将其放置到指定点的左上角,并且将每个图像像素映射到画布上。

drawImage(image, x, y, width, height) :把整个图像复制到画布,允许指定图像的宽度和高度。

drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) :指定图像的任何矩形区域,对画布中的任何位置都可进行任何的缩放。

参数说明:

  • image 所要绘制的图像。这必须是表示 <img> 标记或者屏幕外图像的 Image 对象,或者是 Canvas 元素。
  • x, y 要绘制的图像的左上角的位置。
  • width, height 图像所应该绘制的尺寸。指定这些参数使得图像可以缩放。
  • sourceX, sourceY 图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。
  • sourceWidth, sourceHeight 图像所要绘制区域的大小,用图像像素表示。
  • destX, destY 所要绘制的图像区域的左上角的画布坐标。
  • destWidth, destHeight 图像区域所要绘制的画布大小。

 

 

坐标变换

2D绘图环境支持所有基本绘图变换。当创建绘图环境,变换矩阵便已经初始化了默认值。

translate(dx,dy) :平移变换。将画布按向量(dx,dy)平移。也即将原点移动到坐标(dx,dy)。

rotate(a) :旋转变换,画布绕原点旋转a弧度角。

scale(scaleX,scaleY) :缩放图像,x轴放大scaleX,y轴放大scaleY。scaleX,scaleY默认都为1.0。

transform(m1_1,m1_2,m2_1,m2_2,dx,dy) :将变换矩阵乘以以下矩阵。

m1_1 m1_2 dx

m2_1 m2_2 dy

0       0        1

setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy) :重置变换矩阵到默认状态,然后调用transform()。

 

说明:

平移 :context.translate(dx,dy) 可以使用context.transform(1,0,0,1,dx,dy) 或者 context.transform(0,1,1,0.dx,dy) 代替。

旋转 :context.rotate(a)可以使用context.transform(Math.cos(a*Math.PI/180),Math.sin(a*Math.PI/180),-Math.sin(a*Math.PI/180),Math.cos(a*Math.PI/180),0,0)

或者用

context.transform(-Math.sin(a*Math.PI/180),Math.cos(a*Math.PI/180),Math.cos(a*Math.PI/180),Math.sin(a*Math.PI/180), 0,0)代替。

缩放 :context.scale(sx, sy)可以使用context.transform(sx,0,0,sy,0,0)或者context.transform(0,sy,sx,0, 0,0)代替。

 

 

保存图形状态

save() 和 restore() 方法允许你保存和恢复一个 CanvasRenderingContext2D 对象的状态。

save() 把当前状态推入到栈中。

restore() 从栈的顶端弹出最近保存的状态,并且根据这些存储的值来设置当前绘图状态。

CanvasRenderingContext2D 对象的所有属性(除了画布的属性是一个常量)都是保存的状态的一部分。变换矩阵和剪切区域也是这个状态的一部分,但是当前路径和当前点并不是。

 

 

操作像素

createImageData

getImageData

putImageData

ImageData对象保存了图像像素值。每个对象有三个属性: width, height 和data。data 属性类型为CanvasPixelArray,用于储存width*height*4个像素值。每一个像素有RGB值和透明度alpha值(其值为 0 至255,包括alpha在内!)。像素的顺序从左至右,从上到下,按行存储。

 

 

渐变

Context对象可以通过createLinearGradient()和createRadialGradient()两个方法创建渐变对象,这两个方法的原型如下:

Object createLinearGradient(x1, y1, x2, y2) :创建一个从(x1, y1)点到(x2, y2)点的线性渐变对象。

Object createRadialGradient(x1, y1, r1, x2, y2, r2) :创建一个从以(x1, y1)点为圆心、r1为半径的圆到以(x2, y2)点为圆心、r2为半径的圆的径向渐变对象。

 

渐变对象创建完成之后必须使用它的addColorStop()方法来添加颜色,该方法的原型如下:

void addColorStop(position, color) :其中position表示添加颜色的位置,取值范围为[0, 1],0表示起点,1表示终点;color表示添加的颜色,取值可以是任何CSS颜色值。

渐变对象创建并配置完成之后就可以将其赋予Context对象的strokeStyle属性或者fillStyle属性,然后绘制的图形就具有了所需的渐变效果。

 

 

4. 一些简单的例子

4.1 绘制路径

例: canvas的绘制是基于状态的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <canvas id="myCanvas" width="800" height="800" style="border: 1px solid black">
        你的浏览器还不支持哦
    </canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        // 状态设置
        context.moveTo(100,100);
        context.lineTo(700,700);
        context.lineTo(100,700);
        context.lineTo(100,100);
        context.lineWidth = 5;
        context.strokeStyle = "red";
        // 绘制
        context.stroke();

        // 状态设置
        context.moveTo(200,100);
        context.lineTo(700,600);
        context.strokeStyle = "black";
        // 绘制
        context.stroke();
    </script>
</body>
</html>

绘图结果:

wps9B3C.tmp

由于stroke()方法会把当前路径中的所有线条都描一遍。所以第二段线条的黑色线的属性把第一段线条的属性覆盖掉了,从而导致了两条线段都是黑色的。

所以绘制新图像之前必须使用beginPath、closePath。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="myCanvas" width="800" height="800" style="border: 1px solid black"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // 开始一段路径
    context.beginPath();
    // 状态设置
    context.moveTo(100,100);
    context.lineTo(700,700);
    context.lineTo(100,700);
    context.lineTo(100,100);
    context.lineWidth = 5;
    context.strokeStyle = "red";
    // 绘制
    context.stroke();

    // 开始一段路径
    context.beginPath();
    // 状态设置
    context.moveTo(200,100);
    context.lineTo(700,600);
    context.strokeStyle = "black";
    // 绘制
    context.stroke();
</script>
</body>
</html>

绘图结果:

wps9B5D.tmp

 

 

 

4.2 绘制七巧板

例:绘制七巧板,该例需要绘制线条而只是绘制图形,所以不需要使用stroke()方法,只需要使用fill()方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="myCanvas" width="800" height="800" style="border: 1px solid black"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    var tangram = [
        {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
        {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
        {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
        {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
        {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
        {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
        {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"},
    ];

    function draw(piece,ctx){
        ctx.beginPath();
        var p0 = piece.p[0];
        ctx.moveTo(p0.x,p0.y);
        for(var i = 1;i<piece.p.length;i++){
            var pi = piece.p[i];
            ctx.lineTo(pi.x, pi.y);
        }
        ctx.lineWidth = 1;
        ctx.strokeStyle = "black";
        ctx.fillStyle = piece.color;
        ctx.fill();    // 绘图,填充颜色。
        ctx.closePath();
    }

    // 绘制七巧板
    for(var i=0;i<tangram.length;i++){
        draw(tangram[i],context);
    }

</script>
</body>
</html>

绘图结果:

 

 

 

4.3 绘制画圆

对于arc()方法。其圆弧的极坐标表示方法如下:

 

例:绘制一段圆弧。

var context = document.getElementById("myCanvas").getContext("2d");

context.lineWidth = 5;
context.strokeStyle = "blue";
context.arc(300,300,200,0,1.5*Math.PI);
context.stroke();

绘图结果:

 

 

arc()方法最后一个参数用于设置绘制圆弧的顺逆时针。若为true,表示逆时针,若为false,表示顺时针。但这里的顺逆时针的概念与一般的不同。具体参看示例。

var context = document.getElementById("myCanvas").getContext("2d");

context.beginPath();
context.lineWidth = 5;
context.strokeStyle = "blue";
context.arc(200,400,100,0,1.5*Math.PI,true);
context.stroke();

context.beginPath();
context.arc(500,400,100,0,0.5*Math.PI,true);
context.stroke();

绘图结果:

 

 

 

二、保存canvas图形为文件

Canvas元素有一个toDataURL()方法。该方法可以将canvas中的图像数据进行base64编码。

函数:canvas.toDataURL(type, encoderOptions);

  • type:图像格式,默认为"image/png"。
  • encoderOptions:数值为0~1,表示图片质量,仅在type为"image/jpeg"或"image/webp"时有效。

该方法返回一串URI字符串。该字符串是canvas中图像数据的base64编码。

toDataURL()方法的浏览器兼容情况:

ChromeFirefox(Gecko)Internet ExplorerOperaSafariAndroidChrome for AndroidFirefox Mobile(Gecko Mobile)IE MobileOpera MobileSafari Mobile
43.6(1.9.2)994.03.2 18  1.0(1.9.2)(Yes) 19  3.0

 

 

例:打印URL。

var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
//  打印出URL
console.log(dataURL);

 

例:设置图像编码的质量。

var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);

 

例:将canvas的绘图结果显示到img中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="myCanvas" width="800" height="800" style="border: 1px solid black"></canvas>
<img id="myImg" src="" width="800" height="800" alt="canvas picture" />
<script type="text/javascript">
    var img = document.getElementById("myImg");
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // 绘图
    context.beginPath();    context.arc(400,400,200,0,2*Math.PI);
    context.stroke();

    // 设置img的src
    var url = canvas.toDataURL();
    img.src = url;
</script>
</body>
</html>

 

例:将canvas保存成图片文件。

方法一:将canvas的图形同步到image。既可以鼠标右击保存图片。

 

方法二:将window.location.href 赋值为DataURL 。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border: 1px solid black"></canvas>
<input id="saveBtn" type="button" onclick="saveImg()" value="保存图片"/>
<script type="text/javascript">var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // 绘图
    context.beginPath();
    context.arc(150,150,50,0,2*Math.PI);
    context.stroke();

    function saveImg(){
        var url = canvas.toDataURL();
        var newURL = url.replace("image/png", "image/octet-stream");
        window.location.href = newURL;
    }
</script>
</body>
</html>

这个方法存在问题,首先在IE10下,浏览器只是跳转到了空白页,没有下载文件。其次,在Chrome中下载文件没有文件名。Chrome中总是这样显示:

 

 

 

方法三:使用超链接<a></a>提供的链接进行下载。该方法可以解决下载文件名缺失的问题,但IE10中无法使用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border: 1px solid black"></canvas>
<input id="saveBtn" type="button" onclick="saveImg()" value="保存图片"/>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // 绘图
    context.beginPath();
    context.arc(150,150,50,0,2*Math.PI);
    context.stroke();

    function saveImg(){
        var url = canvas.toDataURL();
        var saveLink = document.createElement('a');
        saveLink.href = url;
        saveLink.download = "圆弧.png";
        // 触发点击事件
        var clickEvent = document.createEvent('MouseEvents');
        clickEvent.initEvent('click', true, true);
        saveLink.dispatchEvent(clickEvent);
    }
</script>
</body>
</html>

绘图结果:

 

 

 

三、让低版本IE支持Canvas

Google提供了一个ExplorerCanvas的函数库,简称excanvas。该函数库使Canvas在低版本的IE下也可使用。

excanvas的原理是在低版本IE中使用VML绘图。需要注意的是,低版本的IE678使用VML绘图的效率比HTML5绘图的效率低很多。

例:在IE 6,7,8中使用canvas画圆。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--[if IE]><script type="text/javascript" src="lib/excanvas.js"></script><![endif]-->
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border: 1px solid black"></canvas>
<script type="text/javascript">
    // IE 6,7,8中必须等所有dom加载完毕才能画出图形。
    window.onload = function () {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        // 绘图
        context.beginPath();
        context.arc(150,150,50,0,2*Math.PI);
        context.stroke();
    };
</script>
</body>
</html>

 

 

 

 

 

为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处。LaplaceDemon/ShiJiaqi。

http://www.cnblogs.com/shijiaqi1066/p/4851774.html

 

转载于:https://www.cnblogs.com/shijiaqi1066/p/4851774.html

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值