<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本相关</title>
<style>
body,
html {
background-color: #bfa;
overflow: hidden;
}
canvas {
margin: 150px auto;
border: 1px solid black;
display: block;
background-color: white;
}
</style>
</head>
<body>
<canvas id="test" width="300" height="300">
<span>您的浏览器版本过低,请更换IE-9以上,或使用chrome等其他浏览器</span>
</canvas>
<script type="text/javascript">
window.onload = function(){
/** @type {HTMLCanvasElement} */
//1.获取画布
var canvas = document.querySelector('#test');
if (canvas.getContext) {
//2.获取画笔
var ctx = canvas.getContext('2d');
/*在canvas中绘制文本
canvas提供了两种方法来渲染文本
1. fillText(text,x,y)
在指定的(x,y)位置填充指定的文本
2. strokeText(text,x,y)
在指定的(x,y)位置绘制文本边框 */
ctx.fillStyle = 'pink';
ctx.font = '40px sans-serif';
/*
文本样式
font = value(像素,'字体')
当前我们用来绘制文本的样式,这个字符串使用和CSS font 属性相同的语法
例： ctx.font = '10px sans-serif' 大小和字体缺一不可
注意：!!!字体默认为sans-serif
*/
ctx.fillText('你好啊',50,50);
ctx.strokeText('你好啊',100,100);
}
}
</script>
</body>
</html>
298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
