简易的html5 Canvas绘图示例(斗图终结者第一版源码)-HQY 一个和谐有爱的空间

11

2025
04
00:53:32

简易的html5 Canvas绘图示例(斗图终结者第一版源码)

<!--
* 斗图终结者(http://zb.mkblog.cn) 第一版源代码
* 孟坤博客编写
* 文章地址：https://mkblog.cn/519/
* 编写日期：2016-3-25
* 更新日期：2016-12-25
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>表情包制作</title>
<style>
*{
padding:0;
margin:0;
font-family:"微软雅黑";
font-size: 14px;
}
#text{
width:391px;
height:50px;
text-align:center;
font-size: 18px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border:1px solid #666;
}
#mainCenter{
max-width:500px;
margin:0 auto;
text-align:center;
}
#myCanvas{
margin:30px 0 0 0;
}
.shadow{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow: 0px 0px 10px #000000;
-webkit-box-shadow: 0px 0px 10px #000000;
box-shadow: 0px 0px 10px #000000;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
}
</style>
</head>
<body>
<div id="mainCenter">
<canvas id="myCanvas" class="shadow" width="391px" height="368px" style="none;">您的浏览器不支持canvas标签。</canvas>
<br /><br />
<p>在下方输入文字。在图片上使用鼠标右键或长按保存</p>
<input name="text" id="text" onchange ="draw();" onpropertychange ="draw();" oninput ="draw();" value="听说你很跳" />
</div>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById("myCanvas"); //获取Canvas对象(画布)
var write = document.getElementById("text").value; //获取文本的值
if(canvas.getContext){ //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
var ctx = canvas.getContext("2d"); //获取对应的CanvasRenderingContext2D对象(画笔)
var img = new Image(); //创建新的图片对象
img.src = "https://mkblog.cn/blog/demo/doutu/1.png"; //指定原始图片的URL
img.onload = function(){ //浏览器加载图片完毕后再绘制图片
ctx.drawImage(img, 0, 0, 391, 368); //以Canvas画布上的坐标(0,0)为起始点，绘制高度、宽度分别为391和368的图像
ctx.font = "35px 微软雅黑"; //设置字体样式
ctx.fillStyle = "black"; //设置字体填充颜色
ctx.textAlign = 'center'; //设置文本的水平对对齐方式
ctx.fillText(write, canvas.width/2, 350); //从画布高度为350px的地方居中绘制文本
};
}
}
draw();
</script>
</body>
</html>