设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 0 0 7 7 - 超高B格的Canvas标语
返回列表 发新帖
查看: 3003|回复: 13

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

[复制链接]
不二如是
发表于 2017-3-13 14:48:39 | 显示全部楼层 |阅读模式
购买主题 已有 9 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

MSK
发表于 2018-7-31 11:11:06 | 显示全部楼层
交作业~
tmp.png

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

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2018-7-31 11:16

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

上帝也幽默
发表于 2018-9-2 22:32:41 | 显示全部楼层
本帖最后由 上帝也幽默 于 2018-9-2 22:47 编辑

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

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2018-9-3 09:20

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

alltolove
发表于 2017-3-13 16:12:43 | 显示全部楼层
学习了
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
 楼主| 发表于 2017-3-13 16:33:59 | 显示全部楼层
alltolove 发表于 2017-3-13 16:12
学习了

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

aswyamato1989
发表于 2017-8-23 23:31:04 | 显示全部楼层
交作业！
077.jpg

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2018-7-21 12:16

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

隨鈊乄鎍慾
发表于 2018-7-21 11:29:05 | 显示全部楼层
交作业：
360截图20180721112824706.png

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2018-7-21 12:16

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

freeulove
发表于 2019-7-7 22:04:24 | 显示全部楼层
老师是真的牛皮啊，每天跟着学习，很有收获，谢谢你们的付出
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

suweixuan1998
发表于 2020-1-13 13:41:57 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C工作室</title>
  6.     <style type="text/css">
  7.         html.body{
  8.             height: 100%;
  9.             margin: 66px;
  10.             padding: 0;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15. <canvas id="mycanvas" width="1111" height="999">大哥，你的浏览器不支持Canvas～</canvas>
  16. <script type="text/javascript">
  17.     var canvas=document.getElementById("mycanvas");
  18.     var context=canvas.getContext("2d");
  19.     context.fillStyle="#99F";
  20.     context.fillRect(0,0,850,450);
  21.     var img = new Image();
  22.     img.src = "2.jpg";
  23.     img.onload = function () {
  24.         context.drawImage(img,100,200)
  25.     }
  26.     context.fillStyle = "#FFF";
  27.     context.font = '33px Adobe Ming Std';
  28.     context.fillText("怎么得到你想要的？",380,170);

  30.     context.fillStyle = "#FF3";
  31.     context.font = '66px Adobe Ming Std';
  32.     context.fillText("让自己配得上Ta！",300,280)
  33. </script>
  34. </body>
  35. </html>
复制代码


希望后续能够学会用代码修改图片尺寸
1578894060(1).jpg
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
发表于 2020-4-9 20:24:15 | 显示全部楼层
test_3.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-24 16:11

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表