怎样用canvas来绘制彩色七巧板


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来怎样用canvas来绘制彩色七巧板,用canvas来绘制彩色七巧板的注意事项有哪些,下面就是实战案例,一起来看一下。

HTML代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html><html lang="en">

<head>

    <meta charset="UTF-8"/>

    <title>Canvas绘制七巧板</title>

</head>

    <body>

        <style>

            #canvas{        border: 1px solid #aaa;        text-align: center;}

        </style>

        <canvas id="canvas" width="800" height="800">

            当用户浏览器不支持Canvas,请更换浏览器重试!

        </canvas>

    </body>

</html>

js代码如下所示:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

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"}

];//七巧板的七块图形,p为各顶点坐标,color为颜色window.onload = function () {    var canvas = document.getElementById("canvas");    if (canvas.getContext("2d")) {//判断浏览器是否支持canvas

        var context = canvas.getContext("2d");        for (var i = 0; i < tangram.length; i++) {

            draw(tangram[i], context);

        }        function draw(piece, cxt) {

            cxt.beginPath();

            cxt.moveTo(piece.p[0].x, piece.p[0].y);            for (var i = 1; i < piece.p.length; i++) {

                cxt.lineTo(piece.p[i].x, piece.p[i].y);

            }

            cxt.closePath();

            cxt.fillStyle = piece.color;

            cxt.fill();

            cxt.strokeStyle = "black";

            cxt.lineWidth = 5;

            cxt.stroke();

        }

    } else {

        alert("不支持canvas,请更换浏览器!")

    }

};

1.png

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

input type=number的小数问题

怎么使用select获取选中的值

以上就是怎样用canvas来绘制彩色七巧板的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

详解html5 canvas drawing的示例代码(三)

h5在canvas中实现自定义路径动画

怎么用canvas压缩图片

html5中canvas与svg有什么区别

html5使用canvas压缩图片的示例代码

html5 canvas如何绘制圆形?(代码实例)

canvas渐变色:canvas如何实现渐变色的效果?

使用html5 canvas api中的clip()方法裁剪区域图像代码实例

如何使用html5 canvas绘制文字

高德地图+canvas画图结合实现一个小项目

更多相关阅读请进入《canvas》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...