canvas学习一之canvas的基本使用

最新推荐文章于 2022-04-26 23:07:41 发布

aabond

最新推荐文章于 2022-04-26 23:07:41 发布

阅读量364

点赞数

分类专栏： javascript 文章标签： html5 canvas css

本文链接：https://blog.csdn.net/qq_23091073/article/details/78310514

版权

javascript 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

canvas

2 篇文章 0 订阅

订阅专栏

html5

1 篇文章 0 订阅

订阅专栏

一、canvas
1.canvas是html5中的一个标签，通过canvas的getContext得到上下文可以绘图等操作。canvas通过js进行API操作，可以得到想要的图形或动画。
2.html5中canvas有两套尺寸，第一个是元素本身的大小，在标签的属性里指定；还有一个是绘图表面的大小，标签属性和css都可以修改。默认情况下，canvas的元素大小和绘图表面都是300*150；当两者不一致时，浏览器会对画图表面进行缩放，使其符合元素的大小。举个例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas基本使用</title>
    <style type="text/css">
        body {
            background: #dddddd;
         }
         #canvas,#canvas1 {
            margin: 20px;
            padding: 20px;
            background: #ffffff;
            border: thin inset #aaaaaa;
            width: 600px;
            height: 300px;
         }
    </style>
</head>
<body>
    <canvas id='canvas'>
        不支持canvas
    </canvas>
    <canvas id="canvas1" width="600" height="300">
        不支持canvas
    </canvas>
</body>
<script type="text/javascript">

    var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');
    context.font = '38pt Arial';
    context.fillStyle = 'cornflowerblue';
    context.strokeStyle = 'blue';
    context.fillText("Hello Canvas", canvas.width/2 - 150,
                                 canvas.height/2 + 15);
    context.strokeText("Hello Canvas", canvas.width/2 - 150,
                                   canvas.height/2 + 15);

    var canvas1 = document.getElementById('canvas1'),
    context1 = canvas1.getContext('2d');
    context1.font = '38pt Arial';
    context1.fillStyle = 'cornflowerblue';
    context1.strokeStyle = 'blue';
    context1.fillText("Hello Canvas", canvas1.width/2 - 150,
                                 canvas1.height/2 + 15);
    context1.strokeText("Hello Canvas", canvas1.width/2 - 150,
                                   canvas1.height/2 + 15);
</script>
</html>

当没有在标签中指定宽高时，元素本身默认300*150，绘图表面也是300*150，当在css中修改宽高时，只修改元素本身大小，为600*300，绘图表面没有修改，还是300*150，两者不相等，于是浏览器会对画布进行缩放，使之符合大小。这里是横向竖向都放大2倍。

所以，当使用canvas时，最好在标签写好宽高，如果不可以，还可以使用js脚本给canvas加上宽高。

二、2个属性3个方法
2个属性：
width 画图表面的宽；
height 画图表面的高
3个方法：
getContext()：获得绘图对象，一般getContext(“2d”)获得2d绘图对象；
toDateURL(type,quality)：获得一个数据地址，这个是将canvas画布中的内容转化为图像，再将图像转为base64编码，最后得到的是一串字符串。type有image/png,image/jpeg两种，虽然base64有image/gif,但经我测试用火狐测试，不可以转成gif(?)。quality是图片的质量，从0-1.0的double数值；
toBlob(callback,type,args) Blob二进制大对象，将图片转成Blob.callback一个以获得的blob为参数的回调函数，type是图片类型，args图片质量；

将上面代码，修改一下，得到两个方法的照片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两种方法，将canvas转成图像</title>
    <style type="text/css">
        body {
            background: #dddddd;
         }
         #canvas{
            margin: 20px;
            padding: 20px;
            background: #ffffff;
            border: thin inset #aaaaaa;
            width: 600px;
            height: 300px;
         }
    </style>
</head>
<body>
    <canvas id='canvas' width="600" height="300">
        不支持canvas
    </canvas>
    <img id="img">
</body>
<script type="text/javascript">

    var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');
    context.font = '38pt Arial';
    context.fillStyle = 'cornflowerblue';
    context.strokeStyle = 'blue';
    context.fillText("Hello Canvas", canvas.width/2 - 150,
                                 canvas.height/2 + 15);
    context.strokeText("Hello Canvas", canvas.width/2 - 150,
                                   canvas.height/2 + 15);
    var href = canvas.toDataURL("image/png", 0.1);
    var image = document.getElementById("img");//静态获取img节点
    image.src=href;
    canvas.toBlob(function(blob){
        var newImg = document.createElement("img"),//动态生成img节点
        url = URL.createObjectURL(blob);
        newImg.onload = function() {
            URL.revokeObjectURL(url);//加载完成，释放url
        };
        newImg.src = url;
        document.body.appendChild(newImg);
    },"image/png",0.1)
</script>
</html>