夜光序言：
是不是有一天，你会开着心车，而公路无际无边。是不是有一天，你会躲着记忆，而岁月缠绕不休。是不是有一天，你会看着天空，而孤单四下蔓延。是不是有一天，你会哭不出声，而生命已经没有了播放键。
正文：
这种效果：
起始位置，结束位置，注释掉，如下效果：
起始位置，终止位置十分重要：
Canvas绘制文字
/**
* Created by on 2018/4/9.
*/
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = 'green';
context.fillRect(0,0,800,300);
}
// 十分仔细审查每一部分元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas绘制文字</title>
<script type="text/javascript" src="wenzi.js"></script>
<style type="text/css">
body{
margin: 0;
padding:0;
}
</style> //联系margin，padding 可以看出紧贴左上角
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="800" height="300"></canvas>
</body>
</html>
/**
* Created by on 2018/4/9.
*/
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = 'green';
context.fillRect(0,0,800,300);
context.fillStyle = '#fff';
context.fillText('创客学院',50,100);
context.strokeText('创客学院',50,100);
}
Context.font
有三个参数：
Context.font=“font-weight【加粗】 font-size【字体】 font-family”
font-weight【加粗】
|
值 |
描述 |
|
Normal |
默认值 |
|
bold |
粗体 |
|
bolder |
更粗 |
|
lighter |
更细 |
|
100 200 300 400 500 600 700 800 900 |
粗到细 400=normal 700=bold |
JS:代码
/**
* Created by on 2018/4/9.
*/
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = 'green';
context.fillRect(0,0,800,300);
context.fillStyle = '#fff';
context.strokeStyle = '#fff';
context.font = "bold 40px 微软雅黑"
context.fillText('创客学院',50,50);
context.strokeText('创客学院',50,100);
}
1：设置文字垂直对齐方式：
属性值：top(顶部对齐) ， hanging（悬挂） ， middle(中间对齐) ，bottom(底部对齐)
Context.textbaseline = “”
/**
* Created by on 2018/4/9.
*/
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = 'green';
context.fillRect(0,0,800,300);
context.fillStyle = '#fff';
context.strokeStyle = '#fff';
context.font = "bold 40px 微软雅黑";
context.textBaseline = "hanging";
context.fillText('创客学院 光灵',0,50);
context.fillText(' 光灵 带来的创造性编程',40,150); //通过横纵坐标来锁定位置
/* context.strokeText('创客学院',50,100);*/
}