总结html5-canvas学习笔记

最新推荐文章于 2023-08-05 11:28:33 发布

weixin_30721899

最新推荐文章于 2023-08-05 11:28:33 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/yetbobo/p/4819937.html

版权

canvas是html5中很重要的一部分，我们可以用它来绘制各种平面图形， 3d图，动画等等。每每看到网上超炫的html5页面，首先立马下载下来，心里想着有一天自己也可以做出这样酷炫的效果，骚年你是不是这样的！

比如这样的：

还有这样的（这个是3d效果，点击图片进去看看吧）：

但是，功夫不是一天练成的，一门新技术不是你学着做个demo就掌握了的，我们先要一点一点地学习基础知识才行呀。刚开始学html5的时候，我们都会先接触到canvas，api给的方法有很多，我是这样学的，自己写个demo，一个方法一个属性的去试，看它出来是个什么样子的。在这里我主要标记一下，我在练习过程中，遇到的一些疑惑。总结一下canvas.save()和canvas.restore()， canvas.beginPath()和canvas.closePath()怎么用。先把代码拉出来：

canvas.save()和canvas.restore()用法：

save() 和restore()主要在对画布进行转换（如：扭曲，旋转，缩放等）时很用作用。save()方法是保存画布当前状态的，restore()是取出画布保存的状态。比如现在要对画布进行多个动作处理，第一个动作进行了缩放处理，如果在没有缩放处理前保存一下空白状态，那么再进行第二个动作新建时也会有第一个动作缩放效果的影响。所以最好在对画布多个动作处理前，先canvas.save()保存一下空白状态或者你希望后面动作需要出现的状态，当前动作处理完了再canvas.restore()一下，取出保存的空白状态保证后面的动作不受影响。

 /**图形变形**/
    var c10 = document.getElementById("myCanvas10");
    var cre10 = c10.getContext("2d");
    cre10.fillStyle = "#eeeeff";
    cre10.fillRect(0, 0, 300, 300);
    cre10.save();
    cre10.fillStyle = "rgba(255, 0, 0, 0.1)";
    cre10.translate(50, 50);
    cre10.scale(0.5, 0.5);
    cre10.rotate(Math.PI/4);
    cre10.fillRect(0, 0, 100, 100);
    cre10.restore();
    cre10.save();
    cre10.fillStyle = "rgba(255, 0, 0, 0.2)";
    cre10.rotate(Math.PI/4);
    cre10.translate(100, 100);
    cre10.scale(0.5, 0.5);
    cre10.fillRect(0, 0, 100, 100);
    cre10.restore();
    cre10.save();
    cre10.fillStyle = "rgba(255, 0, 0, 0.5)";
    cre10.translate(130, 130);
    cre10.scale(0.5, 0.5);
    cre10.shadowOffsetX = 10;
    cre10.shadowOffsetY = 10;
    cre10.shadowColor = "rgba(100, 100, 100, 0.5)";
    cre10.shadowBlur = 1.5;
    cre10.fillRect(0, 0, 150, 150);

本来效果是这样的：

如果去掉canvas.save()和canvas.restore()以后就是这样的：

canvas.beginPath()和canvas.closePath()用法：

这两个经常应用在绘制线条和圆弧中，可以成对用，也可以单独用，他们两个没有必然的联系。beginPath()是告诉浏览器我要开始划线了记录一下，这里作为一个起始点。closePath()是闭合路径，将结束焦点和起始点用直线链接起来。如果没有有closePath()结束的话，就不会有直线去链接结束点和起始点。

两个一起用是这样的：

没有用closePath()关闭线条：

但是往往不用closePath()方法还可以达到很好的效果：

下面是我用canvas画的小房子，很难看但是也要写出来：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制图形</title>
    <style type="text/css">
        .canv{
            border:1px #d3d3d3 solid;
            margin:20px 10px;
        }
    </style>
</head>
<body>
<canvas class="canv" width="300" height="300" id="canvas01"></canvas>

<script>
    window.onload = function(){
        drawHouse("canvas01");
    };
    //绿瓦红房子
    function drawHouse(id){
        var canv = document.getElementById(id);
        var canvas = canv.getContext("2d");
        canvas.fillStyle = "#eeeeff";
        canvas.fillRect(0, 0, 300, 300);
        console.info("第一步：空白，啥也没有");
        canvas.fillStyle = "green";
        canvas.beginPath();
        canvas.moveTo(150, 10);
        canvas.lineTo(270, 110);
        canvas.lineTo(30, 110);
        canvas.closePath();
        canvas.fill();
        canvas.fillStyle = "black";
        canvas.beginPath();
        canvas.moveTo(80, 68);
        canvas.lineTo(80, 20);
        canvas.lineTo(100, 20);
        canvas.lineTo(100, 52);
        canvas.closePath();
        canvas.fill();
        console.info("第二步：先盖绿色的房顶，黑色的烟囱");
        canvas.fillStyle = "red";
        canvas.beginPath();
        canvas.moveTo(50, 110);
        canvas.lineTo(50, 300);
        canvas.lineTo(250, 300);
        canvas.lineTo(250, 110);
        canvas.closePath();
        canvas.fill();
        console.info("第三步：刷红色的墙");
        canvas.fillStyle = "blue";
        canvas.beginPath();
        canvas.moveTo(80, 140);
        canvas.lineTo(80, 190);
        canvas.lineTo(130, 190);
        canvas.lineTo(130, 140);
        canvas.closePath();
        canvas.fill();
        canvas.strokeStyle = "white";
        canvas.beginPath();
        canvas.moveTo(105, 140);
        canvas.lineTo(105, 190);
        canvas.closePath();
        canvas.stroke();
        canvas.beginPath();
        canvas.moveTo(80, 165);
        canvas.lineTo(130, 165);
        canvas.closePath();
        canvas.stroke();
        console.info("第四步：开个蓝色窗户白色的格子");
        canvas.fillStyle = "white";
        canvas.beginPath();
        canvas.moveTo(150, 210);
        canvas.lineTo(150, 300);
        canvas.lineTo(210, 300);
        canvas.lineTo(210, 210);
        canvas.closePath();
        canvas.fill();
        canvas.fillStyle = "black";
        canvas.beginPath();
        canvas.arc(200, 255, 5, 0, Math.PI*2);
        canvas.closePath();
        canvas.fill();
        canvas.save();
        console.info("第五步：开一扇白色的门，黑把手");
    }

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

转载于:https://www.cnblogs.com/yetbobo/p/4819937.html

weixin_30721899

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
总结html5-canvas学习笔记

canvas是html5中很重要的一部分，我们可以用它来绘制各种平面图形， 3d图，动画等等。每每看到网上超炫的html5页面，首先立马下载下来，心里想着有一天自己也可以做出这样酷炫的效果，骚年你是不是这样的！比如这样的：还有这样的（这个是3d效果，点击图片进去看看吧）：但是，功夫不是一天练成的，一门新技术不是你学着做个demo就掌握了的，我们先要一点一点地学习基础知识才...
复制链接

扫一扫