<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>canvas</title>

    <style type="text/css">

        #canvas {

            width: 200px;

            height: 200px;

        }

    </style>

</head>

<body>

    <canvas id="canvas"></canvas>

    <script type="text/javascript">

        var canvas = document.getElementById('canvas');

        var ctx = canvas.getContext('2d');

        canvas.width = 200;

        canvas.height = 200;

        ctx.fillStyle = '#0000FF';

        ctx.fillRect(0, 0, 200, 200);

        ctx.font = 'normal 100px 微软雅黑';

        ctx.textAlign = 'center';

        ctx.textBaseline = 'middle';

        ctx.fillStyle = '#FFFFFF';

        ctx.fillText('HW', 100, 75);

        ctx.font = 'normal 20px 微软雅黑';

        ctx.fillText('Hello World', 100, 150);

        var img = new Image();

        img.src = canvas.toDataURL('image/png');

        img.onload = function () {

            document.body.appendChild(img);

        };

    </script>

</body>

</html>

利用canvas制作简单的logo的更多相关文章

  1. 用Canvas制作简单的画图工具

    今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...

  2. canvas制作简单动画

    在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1．自定义一个函数,用于图形的移动或其他动作. 2．使用setIn ...

  3. 利用canvas制作乱跑的小球

    canvas制作乱跑的小球 说明:将下面的代码放到html的body就可以,键盘控制上(W)下(S)左(A)右(D) <body> <canvas id="canvas&q ...

  4. 利用 css 制作简单的提示框

    在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...

  5. 利用canvas制作图片（可缩放和平移）+相框+文字

    前言: 公司一个售前问我能不能用H5做一个手机拍照,给相片添加相框和添加文字上传到服务器的功能,我当时一琢磨觉得可行,就利用空余时间做了一个demo,去掉了拍照和上传,如果以后有机会,会给补上,当然对 ...

  6. html5 利用canvas实现简单的人物走动

    最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...

  7. 移动端利用canvas画布简单实现刮刮乐效果

    为了研究canvas一些属性简单实现的一个小效果  代码样式不太规范 随手写的 请问喷 初学者可以看下 css代码 <style> * { margin: 0; padding: 0; } ...

  8. 利用烧鹅制作简单BadUSB，插谁谁怀孕

    所用硬件设备为烧鹅,烧鹅是RadioWar基于Teensy++ 2.0 AT90USB1286芯片设计的USB Rubber Ducky类开发板. 使用veil编码meterpreter生成paylo ...

  9. 利用Python制作简单的小程序：IP查看器

    前言 说实话,查看电脑的IP,也挺无聊的,但是够简单,所以就从这里开始吧.IP地址在操作系统里就可以直接查看.但是除了IP地址,我们也想通过IP获取地理地址和网络运营商情况.IP地址和地理地址并没有固 ...

随机推荐

  1. 五年磨一剑：Java 开源博客 Solo 1.0.0 发布了！

    从 Solo 第一个版本发布至今,已经过去 5 年了.今天我们非常自豪地宣布,Solo 1.0.0 正式发布,感谢一直以来关注 B3log 开源的朋友! 目前 B3log 开源有三款产品: GitHu ...

  2. java和android文件加密小结

    最近遇到一个文件加密的问题,自己读写的,安全性虽然还可以,但是速度慢,影响体验. Cipher虽然速度相当快,但是android和java有某些api存在不兼容: 问题解决: 方法引用自:https: ...

  3. spring MVC +freemarker + easyui 实现sql查询和执行小工具总结

    项目中,有时候线下不能方便的连接项目中的数据源时刻,大部分的问题定位和处理都会存在难度,有时候,一个小工具就能实时的查询和执行当前对应的数据源的库.下面,就本人在项目中实际开发使用的小工具,实时的介绍 ...

  4. ___Manacher（线性回文子串处理算法）

    昨晚的bc做得好忧郁----- 第一题改了好久好久好久----等改完发现比赛已经结束了(发现是枚举子集的位运算那儿写错了--) 第二题是判断能否将一个字符串划分成三段回文串 今天学了一点点  Mana ...

  5. 【前端分享】 JavaScript最经典的55个技巧（转）

    从别的地方看到的,保存下,有空实践下再补充. 1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <tab ...

  6. Constants and Variables

    1.定义 Constants :程序编译的时候就已经存在且在程序生命周期内不会改变的值. Variables:变量本身被用来存储特定类型的数据,可以根据需要随时改变变量中所存储的数据值.每个变量都有一 ...

  7. jsp+jdbc实现用户登录

    1.1 创建数据库表 表名:user 字段: userid   保存用户的登录id name     用户名 password 密码 1.2 实现思路 a. 用户登录,则需要有个一个表单页,此页面可输 ...

  8. Thinking in file encoding and decoding?

    > General file encoding ways We most know, computer stores files with binary coding like abc\xe4\ ...

  9. sqrt开平方算法的尝试，是的看了卡马克大叔的代码，我来试试用C#写个0x5f3759df和0x5f375a86跟System.Math.Sqrt到底哪个更强

    今天笔试遇到一个代码题,要求写一个开平方算法,回来发现了雷神之锤里的一段神代码: float Q_rsqrt( float number ) { long i; float x2, y; const ...

  10. 【henuacm2016级暑期训练-动态规划专题 B】Coloring Trees

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] f[i][j][k]前i个位置,第i个位置放j这个颜色,然后形成了k个联通块的最小花费 分第i个位置有没有已经放颜色两种情况考虑. ...