0 0 7 7 - 超高B格的Canvas标语

不二如是 · 发表于 2017-3-13 14:48:39

购买主题 已有 9 人购买 本主题需向作者支付 2 鱼币 才能浏览

MSK · 发表于 2018-7-31 11:11:06

交作业~

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Canvas高逼格标语</title>
</head>
<body>
    <canvas id="mycanvas" width="1400" height="999">大哥, 你的浏览器不支持canvas~</canvas>
    <script>
        context = document.getElementById("mycanvas").getContext("2d");
        context.fillStyle = "#a00";
        context.fillRect(0, 0, 1400, 640);
        var img = new Image();
        img.src = "img.jpg";
        img.onload = function (){
            context.drawImage(img, 20, 40);
        };
        context.fillStyle = "#000";
        context.font = "33px monospace";
        context.fillText("托尼", 350, 100);
        context.font = "25px monospace";
        context.fillText("你可以摧毁我的房子,我的装备,但是你摧毁不了一个事实,我是钢铁侠。", 350, 160);
    </script>
</body>
</html>

上帝也幽默 · 发表于 2018-9-2 22:32:41

本帖最后由上帝也幽默于 2018-9-2 22:47 编辑

交作业~
话说这里如何使用代码设置图片尺寸

alltolove · 发表于 2017-3-13 16:12:43

学习了

不二如是 · 发表于 2017-3-13 16:33:59

alltolove 发表于 2017-3-13 16:12
学习了

aswyamato1989 · 发表于 2017-8-23 23:31:04

交作业！

隨鈊乄鎍慾 · 发表于 2018-7-21 11:29:05

交作业：

freeulove · 发表于 2019-7-7 22:04:24

老师是真的牛皮啊，每天跟着学习，很有收获，谢谢你们的付出

suweixuan1998 · 发表于 2020-1-13 13:41:57

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鱼C工作室</title>
    <style type="text/css">
        html.body{
            height: 100%;
            margin: 66px;
            padding: 0;
        }
    </style>
</head>
<body>
<canvas id="mycanvas" width="1111" height="999">大哥，你的浏览器不支持Canvas～</canvas>
<script type="text/javascript">
    var canvas=document.getElementById("mycanvas");
    var context=canvas.getContext("2d");
    context.fillStyle="#99F";
    context.fillRect(0,0,850,450);
    var img = new Image();
    img.src = "2.jpg";
    img.onload = function () {
        context.drawImage(img,100,200)
    }
    context.fillStyle = "#FFF";
    context.font = '33px Adobe Ming Std';
    context.fillText("怎么得到你想要的？",380,170);

    context.fillStyle = "#FF3";
    context.font = '66px Adobe Ming Std';
    context.fillText("让自己配得上Ta！",300,280)
</script>
</body>
</html>

希望后续能够学会用代码修改图片尺寸

小脑斧 · 发表于 2020-4-9 20:24:15

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 57321 狗仔卡	发表于 2017-3-13 14:48:39 \| 显示全部楼层 \|阅读模式购买主题已有 9 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 37
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

[庖丁解牛] 0 0 7 7 - 超高B格的Canvas标语

本帖被以下淘专辑推荐:

点评

评分

点评

评分

点评

评分

点评

评分