context.font = "normal 20px 微软雅黑"//字体
context.textBaseline = "middle"//竖直对齐
context.textAlign = "center"//水平对齐
context.fillText("文字", x坐标, y坐标, 文字宽度)//绘制文字
以上是canvas绘制文字常用的.
HTML5 Canvas的文本设置字体和大小，可以使用的字体在画布范围内的属性。下面是一个简单的实例，基本语法：
context.font=[value]
HTML5 Canvas Text Font &Size 例子
<!DOCTYPE HTML>
<html>
<head>
<title>html5_canvas_text_size</title>
<style>
body {margin: 0pxpadding: 0px}
#myCanvas {border: 1px solid #9C9898margin:0 automargin-top:200pxmargin-left:100px}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas")
var context = canvas.getContext("2d")
var x = 150
var y = 100
context.font = "40pt Calibri"
context.fillText("Hello WEBJX!", x, y)
}
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200">
</canvas>
</body>
</html>
Canvas简介及实践：
canvas是HTML5新增的元素，主要作用是支持用JS画图。
一、创建Canvas元素
二、通过JavaScript来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
•1:JavaScript使用id来寻找canvas元素。
•2:创建context对象。getContext(“2d”)对象是内建的HTML5对象。
3:绘制一个红色的矩形。fillStyle方法将其染成红色，fillRect方法规定了形状、位置和尺寸
三、实例-图像 把一幅图像放置到画布上：
四、水印生成主流程
1、建立一个画布：
2、生成水印字符串：
3、CanvasElement.toDataURL() 方法返回一个包含图片展示的data URLs，包含了Base64过的图像信息。说明：Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents. 例如：“data:image/pngbase64,R0lGODdhMAAwAPAAAAAAAP”
4、平铺在background上
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）