Canvas学习总结

最新推荐文章于 2024-02-26 10:15:38 发布

一介百姓

最新推荐文章于 2024-02-26 10:15:38 发布

阅读量823

点赞数

文章标签： canvas 画布 html5 canvas canvas动画

本文链接：https://blog.csdn.net/u012475786/article/details/86649429

版权

Canvas学习总结

一. 什么是Canvas

Canvas属于HTML5新特性API，主要增强在浏览器绘制图像功能；当然一些简单的矢量图我们可以通过html标签进行拼接组装，也可以绘制SVG图像；但是对于位图(.jpg/.png)等格式的图片处理canvas有着不可比拟的优势；

二.canvas的基本实现

1.怎样定义canvas

canvas的实现其实是通过<canvas>标签和HTML5提供的JS API进行操作的，在html文件中定义canvas标签，其实表示定义了一块画布了；接下来就可以通过JS获取画布的上下文并进行操作；

代码如下:

<!doctype html>
<html>
<head>
<title>canvas基本实现</title>
</head>

<body>
<canvas id="my_canvas"></canvas>
</body>
<script language="javascript">
    var cvs=document.getElementById("my_canvas"); //获取canvas画布
    var ctx=cvs.getContext("2d"); //获取canvas画布2D执行环境
    //dosometing
</script>
</html>

上述代码所示，通过DOM选择器获取相应的canvas标签，然后通过getContext()方法获取到canvas 画布的绘画上下文环境，其中”2d”表示提供2D渲染来绘制图像；

2.canvas兼容性如何

canvas兼容性问题，如下图所示：

如果浏览器不支持canvas，可能会导致canvas JSAPI会报错，由于JS属于自上而下执行，遇到错误会退出执行(在没有处理错误的情况下)；所以在使用cavas JS时可以先判断getContext存不存在；或者通过try catch进行错误处理；代码如下：

<script language="javascript">
    var cvs=document.getElementById("my_canvas"); //获取canvas画布
    var ctx=null;
    try{
        ctx=cvs.getContext("2d"); //获取canvas画布2D执行环境
    }catch(e){
        console.error("该浏览器不支持Canvas画布功能");
    }
    //dosometing
</script>

3.怎样设置canvas画布的宽度和高度呢？

这里为什么要单独讲，因为有些人可能会用CSS设置宽高；对于canvas的宽高，可以在canvas标签中定义width/height属性或者通过获取到canvas标签DOM再进行相应的设置；

例如：<canvas id="canvas" width="150" height="150"></canvas>

<body>
<canvas id="my_canvas"></canvas>
</body>
<script language="javascript">
    var cvs=document.getElementById("my_canvas"); //获取canvas画布
        cvs.width="150";
        cvs.height="150";
    var ctx=null;
    try{
        ctx=cvs.getContext("2d"); //获取canvas画布2D执行环境
    }catch(e){
         console.error("该浏览器不支持Canvas画布功能");
    }
    //dosometing
</script>

其中width/height默认单位是像素(也只能是像素)；注意不能通过CSS中的width/height属性进行设置，因为在CSS中设置width/height，会拉升画布的大小，相当于放大/缩小的实现，也就会模糊canvas画布内容；效果如下：

总结：canvas画布宽度/高度一定不能通过CSS来设置，设置宽度/高度单位只能是像素，若想自适应画布需要通过JS进行控制；

4. Canvas图片绘制：

我们可以通过drawImage方法在canvas标签上绘制图片；图片来源可以是通过new Image()，img标签等方式获得；以下通过new Image()来获取图片；

drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)方法，img表示图像源；其中sx，sy，sw，sh表示显示的位置和大小；dx，dy，dw，dh表示裁剪的位置和大小；其中sw，sh可以控制图片的缩放，但sw/sh超过图片自身的宽度/高度就会有放大效果，小于自身的宽度/高度就会产生缩小的效果；效果图如下：

代码如下：

<body>
<canvas id="my_canvas"></canvas>
</body>
<script language="javascript">
    var cvs=document.getElementById("my_canvas"); //获取canvas画布
        cvs.width="150";
        cvs.height="150";
    var ctx=null;
    try{
        ctx=cvs.getContext("2d"); //获取canvas画布2D执行环境
        var img=new Image();
        img.src="./test.jpg";
        img.onload=function(){
            ctx.drawImage(img,0,0,150,200);
        }
    }catch(e){
         console.error("该浏览器不支持Canvas画布功能");
    }
    //dosometing
</script>

注意img.src=”./test.jpg”；在这里单纯的显示不会有任何问题或报错；

但是如果要对图像进行操作，比如像素级操作，获取图像像素的信息数据就会跨域的报错；也就是说，如果要对canvas绘制的图片进行像素级的操作时，需要将html文件和图片文件放置服务器上，并且同源（同协议，同IP，同端口）；同时对于图片的引入，也不能按照上诉方式引入，引入方式改成如下所示：

img.src="http://localhost:8080/test.jpg";

例如在服务器的根目录下，并且地址为:http://localhost:8080

5. 像素级操作:

Canvas属于位图画布，它是以像素为单位拼接而成的图像；说白了canvas画布的内容都是通过许多个像素拼接而成的；所以我们可以通过ImageData对象获取canvas画布像素信息；

ImageData有width，height，data这3个属性，前两个属性就不解释了，data属性是Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间，虽然是一维数组，但是数据确实4个一组为一个像素信息数据；例如一个像素的数据，data就只有4个值(RGBA)的数组，如果是100个像素的数据，那data就有4*100个值的数组；

获取ImageData的方法：

createImageData(w,h);
getImageData(left,top,width,height);

createImageData()方法创建个空的ImageData对象，所有像素默认是透明黑；getImageData()获取对象像素信息，是实际canvas画布图片的像素信息；在canvas中写入像素数据putImageData(newImageData,dx,dy);newImageData为新像素对象数据，dx，dy属于canvas左上角位置；

一介百姓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas学习总结

Canvas学习总结一.什么是CanvasCanvas属于HTML5新特性API，主要增强在浏览器绘制图像功能；当然一些简单的矢量图我们可以通过html标签进行拼接组装，也可以绘制SVG图像；但是对于位图(.jpg/.png)等格式的图片处理canvas有着不可比拟的优势；二.canvas的基本实现1.怎样定义canvascanvas的实现其实是通过<canvas...
复制链接

扫一扫