当前位置:asp编程网>技术教程>Html5教程>  正文

使用html5的fillRect和setTransform画立方体

2017-06-23 11:52:19   来源:www.aspbc.com   作者:wangsdong   浏览量:1022   收藏
原理分析:
画三个长方形,顶部长方形和侧面长方形变形,然后将三个长方形移到合适的位置,这样一个长方体就完成了

代码如下:
<div style="width: 600px; margin: 0 auto; margin-top: 30px;">
<canvas id="myCanvas" width="600" height="350" style="border:1px solid #d3d3d3;">
    你的浏览器不支持canvas....
</canvas></div>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.fillStyle="#0000ff";
    ctx.fillRect(120,100,150,200);
    ctx.closePath();

    ctx.beginPath();
    ctx.setTransform(1,0,-0.5,0.5,50,50);
    ctx.fillStyle="red";
    ctx.fillRect(120,0,150,100);
    ctx.closePath();

    ctx.beginPath();
    ctx.setTransform(0,1,-0.5,0.5,320,-70);
    ctx.fillStyle="green";
    ctx.fillRect(120,0,200,100);
    ctx.closePath();

</script>

关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网