利用canvas制作简单的logo
<!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的更多相关文章
- 用Canvas制作简单的画图工具
今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...
- canvas制作简单动画
在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1.自定义一个函数,用于图形的移动或其他动作. 2.使用setIn ...
- 利用canvas制作乱跑的小球
canvas制作乱跑的小球 说明:将下面的代码放到html的body就可以,键盘控制上(W)下(S)左(A)右(D) <body> <canvas id="canvas&q ...
- 利用 css 制作简单的提示框
在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...
- 利用canvas制作图片(可缩放和平移)+相框+文字
前言: 公司一个售前问我能不能用H5做一个手机拍照,给相片添加相框和添加文字上传到服务器的功能,我当时一琢磨觉得可行,就利用空余时间做了一个demo,去掉了拍照和上传,如果以后有机会,会给补上,当然对 ...
- html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
- 移动端利用canvas画布简单实现刮刮乐效果
为了研究canvas一些属性简单实现的一个小效果 代码样式不太规范 随手写的 请问喷 初学者可以看下 css代码 <style> * { margin: 0; padding: 0; } ...
- 利用烧鹅制作简单BadUSB,插谁谁怀孕
所用硬件设备为烧鹅,烧鹅是RadioWar基于Teensy++ 2.0 AT90USB1286芯片设计的USB Rubber Ducky类开发板. 使用veil编码meterpreter生成paylo ...
- 利用Python制作简单的小程序:IP查看器
前言 说实话,查看电脑的IP,也挺无聊的,但是够简单,所以就从这里开始吧.IP地址在操作系统里就可以直接查看.但是除了IP地址,我们也想通过IP获取地理地址和网络运营商情况.IP地址和地理地址并没有固 ...
随机推荐
- 算法入门经典第六章 例题6-14 Abbott的复仇(Abbott's Revenge)BFS算法实现
Sample Input 3 1 N 3 3 1 1 WL NR * 1 2 WLF NR ER * 1 3 NL ER * 2 1 SL WR NF * 2 2 SL WF ELF * 2 3 SF ...
- Java基础——StringBuffer和StringBuilder
本节讲述2个字符串容器的区别 StringBuffer和StringBuilder区别: 1.相同点 两者都是容器(可变的字符序列),都可以对字符串进行基本的“增删改查”操作. 2.不同点 Strin ...
- hdu 1166 敌兵布阵 【线段树】
好好学一下线段树---- 从0开始----加油- 单点更新的 #include<cstdio> #include<cstring> #include<iostream&g ...
- Eclipse中执行Ant脚本出现Could not find the main class的问题及解
试过了:https://blog.csdn.net/bookroader/article/details/2300337 但是不管用,偶然看到这篇没有直接关系的 https://blog.csdn.n ...
- 激情世界杯,盛夏大放价,CDR 618返场继续嗨
最近被刷屏应该就是世界杯.世界杯和世界杯了... 进行了到第七天的球迷们,你们还好么 私房钱还剩下多少?上班有没有请假迟到? 哎,中国的小龙虾都去俄罗斯了,就国足队员没去… 满屏而来的不仅是手机朋友圈 ...
- Java开发就业形势和面试技巧
如果从软件编程的就业来讲,如果你现在不懂架构,那么找到一份好工作还是比较难的,但是这里面有两点需要注意: 传统软件公司,这类公司还会使用最为原始的开发技术(SSH),但是这样的传统软件公司的招聘量已经 ...
- 路飞学城Python-Day20
[31.面向对象的软件开发与作业介绍] 1.面向对象分析(object oriented analysis ,OOA) 软件工程中的系统分析阶段,要求分析员和用户结合在一起,对用户的需求做出精确的分析 ...
- CommonJS 与 ES6 的依赖操作方法(require、import)
CommonJS:http://www.commonjs.org/specs/modules/1.0/ ES2015的 export:https://developer.mozilla.org/en- ...
- 【Paper Reading】Deep Supervised Hashing for fast Image Retrieval
what has been done: This paper proposed a novel Deep Supervised Hashing method to learn a compact si ...
- a标签设置高度不生效问题
<a>是内联元素 必须设置成块级元素block 才能有width和height 不过你可以又定义display:block再定义成display:inline 以避免在IE6下产生BUG ...