日期:2013-12-17 浏览次数:20932 次
要设置笔触颜色HTML5 Canvas的文本,我们可以使用的strokeStyle画布的背景和strokeText()方法。
- context.strokeStyle=[value];
 - context.strokeText("Hello World!", x, y);
 
先看下个例子:
<!DOCTYPE HTML> 
<html> 
<head> 
<title>html5_canvas_text_stroke</title>
<style> 
body {margin: 0px;padding: 0px;}
#myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; margin-left:100px;}
</style> 
<script> 
   window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    var x = 80;
    var y = 110;
    context.font = "60pt Calibri";
 
    context.lineWidth = 3;
    context.strokeStyle = "blue"; // stroke color
    context.strokeText("Hello World!", x, y);
};
</script> 
</head> 
<body> 
 <canvas id="myCanvas" width="578" height="200"> 
 </canvas> 
</body> 
</html>