Rumah > Artikel > hujung hadapan web > HTML5 melukis teks dalam kanvas dengan pemaparan
HTML5 melukis teks dalam kanvas dengan pemaparan
- PHPzasal
- 2016-05-16 15:47:321546semak imbas
Artikel ini terutamanya memperkenalkan cara melukis teks dalam kanvas dalam HTML5 Terdapat dua kaedah untuk melukis teks dalam kanvas, strokeText dan fillText, yang boleh dipilih mengikut keperluan anda.
1. Lukis teks
Dalam persekitaran lukisan, dua kaedah disediakan untuk melukis teks dalam kanvas.
teks lejang(teks,x,y): Lukis teks kosong di (x,y).
fillTeks(teks,x,y): Lukis teks pepejal di (x,y).
2 Lukis teks dalam kanvas
Kodnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset = utf-8">
<title>HTML5</title>
<script type="text/javascript" charset = "utf-8">
//这个函数将在页面完全加载后调用
function pageLoaded()
{
//获取canvas对象的引用,注意tCanvas名字必须和下面body里面的id相同
var canvas = document.getElementById('tCanvas');
//获取该canvas的2D绘图环境
var context = canvas.getContext('2d');
//绘制代码将出现在这里
//绘制文本
context.fillText('Welcome to DuJun Blog',100,40);
//修改字体
context.font = '20px Arial';
context.fillText('Welcome to DuJun Blog',100,100);
//绘制空心的文本
context.font = '36px 隶书';
context.strokeText('欢迎来到笃军的博客',100,200);
}
</script>
</head>
<body onload="pageLoaded();">
<canvas width = "500" height = "300" id = "tCanvas" style = "border:black 1px solid;">
<!--如果浏览器不支持则显示如下字体-->
提示：你的浏览器不支持<canvas>标签
</canvas>
</body>
</html>3 , kesan lukisan
Di atas ialah keseluruhan kandungan bab ini Untuk lebih banyak tutorial berkaitan, sila lawati Tutorial video HTML5!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Gambaran keseluruhan ringkas tentang sintaks dan peraturan Html5Artikel seterusnya：Gambaran keseluruhan ringkas tentang sintaks dan peraturan Html5