[html] 使用canvas制作一个印章

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div>
</body><script>var dataUrl = '';function createStampUrl() {var canvas = document.createElement('canvas');canvas.width = 300;canvas.height = 200;canvas.setAttribute('width', 300);canvas.setAttribute('height', 200);var ctx = canvas.getContext('2d');ctx.beginPath();ctx.ellipse(150, 100, 100, 50, 0, 0, Math.PI * 2);ctx.fillStyle = "red";ctx.strokeStyle = "red";ctx.fill();ctx.stroke();ctx.closePath();ctx.beginPath();ctx.ellipse(150, 100, 90, 40, 0, 0, Math.PI * 2);ctx.fillStyle = "white";ctx.fill();ctx.stroke();ctx.closePath();ctx.beginPath();ctx.ellipse(150, 100, 70, 30, 0, 0, Math.PI * 2);ctx.strokeStyle = "red";ctx.lineWidth = 2;ctx.stroke();ctx.closePath();ctx.font = "14px Microsoft YaHei";ctx.fillStyle = "red";ctx.fillText("hello canvas", 110, 105);dataUrl = canvas.toDataURL("image/jpeg");var app = document.querySelector("#app");app.style.width = "300px";app.style.height = "300px";app.style.backgroundImage = `url(${dataUrl})`;app.style.backgroundRepeat = 'no-repeat';}createStampUrl();
</script>
</html>

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[html] 使用canvas制作一个印章相关推荐

怎样用HTML5 Canvas制作一个简单的游戏
为了让大家清楚HTML5制作游戏的简单流程,所以先了制作一个非常简单的游戏,来看一看这个过程. 游戏非常简单,无非就是英雄抓住怪物就得分,然后游戏重新开始,怪物出现在地图的随机位置,英雄初始化在地 ...
[译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
html5上色游戏制作,怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
使用canvas制作一个移动端画板
概述使用canvas做一个画板,代码里涵盖了一些canvas绘图的基本思想,各种工具的类也可以分别提出来用详细代码下载:http://www.demodashi.com/demo/10503.h ...
html5 游戏制作教程,利用HTML5 Canvas制作一个简单的打飞机游戏
之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和音频扒了了下来....自己凭着玩的心情重新写了一个.仅供娱乐哈......我没有用框架,所有js都是自己写的......所以就可以来当个简 ...
网页游戏制作html5,利用HTML5 Canvas制作一个简单的打飞机游戏
之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和音频扒了了下来....自己凭着玩的心情重新写了一个.仅供娱乐哈......我没有用框架,所有js都是自己写的......所以就可以来当个简 ...
如何用canvas制作一个华容道小游戏（乞丐版）
我大抵是废了φ(．．) ,横竖都学不进去,上课知识不进脑子,学习光想划水摸鱼,心中仅剩的良知告诉我这样下去是铁定不行的哇,既然学不进去,何不打把游戏,既然要打游戏,为啥不自己写个小游戏嘞٩(๑> ...
Android Canvas制作一个可以拖动改变任意形状的四边形效果，并填充颜色
先上效果图: 思路: 1. 定义四个点, 初始化四个点的坐标,绘制点. 2. 绘制直线,把四个点连接起来. 3. 根据四个点的坐标绘制直线路径,填充颜色. 4. 判断手势是否点中四个点的坐标范围内. ...
用html5 Canvas制作一个简单的游戏英雄抓小怪物（上）
1.创建一个Canvas对象先在HTML页面上创建画布,然后再通过document.getElementById()来获取. //创建画布canvas,并获取画布上下文环境 var canvas ...

[html] 使用canvas制作一个印章

[html] 使用canvas制作一个印章

个人简介

主目录

[html] 使用canvas制作一个印章相关推荐

最新文章

热门文章