本文主要是介绍【Canva】绘制图像，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言
Canva绘制图像
<!DOCTYPE html>
<html lang="zh" >
<head><meta charset="utf-8">
</head>
<body class="white-bg"><img /><div>
<p>参考：</p>
<p>HTMLCanvasElement.toDataURL()：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL</p>
<p>HTML DOM Canvas 对象：https://www.runoob.com/jsref/dom-obj-canvas.html</p>
<p>学习 HTML5 Canvas 这一篇文章就够了：https://www.runoob.com/w3cnote/html5-canvas-intro.html</p>
<p>Canvas设置width与height 的问题！：https://www.cnblogs.com/JamKong/p/4987163.html</p>
<p>canvas 计算文字宽度（常用于文字换行）：https://www.cnblogs.com/lanshengzhong/p/9316109.html</p>
<p>HTML canvas measureText() 方法：https://www.runoob.com/tags/canvas-measuretext.html</p>
</div>
<script type="text/javascript">
var canvas = document.createElement("CANVAS");
canvas.width = 400;
canvas.height = 300;var ctx=canvas.getContext("2d");
console.log(ctx);
ctx.fillStyle="#cccccc";
ctx.fillRect(0,0,400,300);var txt = "Hello World !";
ctx.font="30px Arial";
ctx.strokeText(txt, (400-170)/2, (300/2)+(30/2));
var dataURL = canvas.toDataURL();var imgElement = document.getElementsByTagName("img")[0];
imgElement.src = dataURL;
</script>
</body>
</html>参考
HTMLCanvasElement.toDataURL()：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
HTML DOM Canvas 对象：https://www.runoob.com/jsref/dom-obj-canvas.html
学习 HTML5 Canvas 这一篇文章就够了：https://www.runoob.com/w3cnote/html5-canvas-intro.html
Canvas设置width与height 的问题！：https://www.cnblogs.com/JamKong/p/4987163.html
canvas 计算文字宽度（常用于文字换行）：https://www.cnblogs.com/lanshengzhong/p/9316109.html
HTML canvas measureText() 方法：https://www.runoob.com/tags/canvas-measuretext.html
这篇关于【Canva】绘制图像的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
