<!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. Hua Wei 机试题目二

    题目描述:假设1元,5元,10元,50元,100元的人民币若干,实现一个能找到最少张数累计达到一个指定金额方法.如:67元,可分为67个1元钱.也可分为6个10元7个1元,其中最少人民币分法为一张50 ...

  2. s2sh的MVC执行流程和执行原理

    =======================执行流程 1. 从页面开始,提交表单或者点击链接会触发一个action 2. action交给struts2处理,读取src目录struts.xml文件, ...

  3. 如何在使用layer.prompt在输入值为空的情况下点击确定继续执行逻辑？

    突然发现在使用LayUI时,用到弹出层layer.prompt时,如果文本框输入值是空的话点击确定没有反应,不能向下执行. 但是我又需要在这种情况下去继续执行判断或逻辑时该怎么做?? 示例:原代码如下 ...

  4. luogu P5290 [十二省联考2019]春节十二响 优先队列_启发式合并

    思维难度不大,在考上上写的启发式合并写错了,只拿了 60 pts,好难过QAQ 没什么太难的,在考场上想出链的部分分之后很容易就能想到正解.没错,就是非常短的启发式合并.注意一下,写的要漂亮一点,否则 ...

  5. 粘包_Server

    from socket import *# import subprocessip_port = ('127.0.0.1',8080)back_log = 5buffer_size = 1024tcp ...

  6. Pyhton学习——Day24

    # #面向对象设计:# def dog(name,gender,type):# def jiao(dog):# print('One Dog[%s],wfwfwf'%dog['name'])# def ...

  7. HDU 1828 Picture (线段树:扫描线周长)

    依然是扫描线,只不过是求所有矩形覆盖之后形成的图形的周长. 容易发现,扫描线中的某一条横边对答案的贡献. 其实就是 加上/去掉这条边之前的答案 和 加上/去掉这条边之后的答案 之差的绝对值 然后横着竖 ...

  8. 编写python代码获取4k高清壁纸

    Huskiesir最近在研究python爬虫大约俩周了吧,由于比较懒,也没把具体研究的过程与经验写下来,实在是一大憾事.这次直接上干货,代码送给大家: import re import request ...

  9. Android开发进度04

    1,今日:目标:实现登录和注册功能 2,昨天:完成登录和注册的界面以及后台数据库的操作 3,收获:会使用SQlite数据库的操作语句 4,问题:登录时出现问题(登录不上去)

  10. js数组并集，交集，差集

    js数组并集,交集,差集的计算方式汇总 一. new Set 方式实现 这种方式实现起来比较简单,原理就是参考new Set可以去重的功能 ,关于去重可以点击 https://www.haorooms ...