server/aspnetapp/wwwroot/lib/alloyfinger/example/canvas/index.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Canvas+AlloyFinger</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <style>
        .ribbon {
            top: 3.2em;
            right: -4.7em;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            color:#fff;
            display: block;
            padding: .6em 3.5em;
            position: fixed;
            text-align: center;
            text-decoration: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-color: green;
            z-index: 10000;
        }
    </style>
</head>
<body>
<a href="https://github.com/AlloyTeam/AlloyFinger" class="ribbon">Fork me on Github</a>
<script src="../../asset/alloy_paper.js"></script>
<script src="../../alloy_finger.js"></script>
<div style="text-align: center;"><canvas id="ourCanvas" width="300" height="600" style="border: 1px solid black;"></canvas></div>

<script>

    ;(function (AlloyPaper) {
        var Stage = AlloyPaper.Stage, Bitmap = AlloyPaper.Bitmap,Loader=AlloyPaper.Loader;

        var stage = new Stage("#ourCanvas");
        stage.autoUpdate=false;
        var ld = new Loader();
        ld.loadRes([
            { id: "test", src: "../../asset/test.png" },
            { id: "test2", src: "../../asset/test2.png" }
        ]);
        ld.complete(function () {
            var bmp = new Bitmap(ld.get("test"));
            bmp.originX = 0.5;
            bmp.originY = 0.5;
            bmp.x = stage.width / 2;
            bmp.y =150;
            stage.add(bmp);

            var bmp2 = new Bitmap(ld.get("test2"));
            bmp2.originX = 0.5;
            bmp2.originY = 0.5;
            bmp2.x = stage.width / 2;