例如：
<html><body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas")
var ctx = c.getContext("2d")
ctx.font = "20px Georgia"
ctx.fillText("Hello World!", 10, 50)
ctx.font = "30px Verdana"
var gradient = ctx.createLinearGradient(0, 0, c.width, 0)
gradient.addColorStop("0", "magenta")
gradient.addColorStop("0.5", "blue")
gradient.addColorStop("1.0", "red")
ctx.fillStyle = gradient
ctx.fillText("Big smile!", 10, 90)
</script>
<p><strong>Note:</strong>The canvas tag is not supported in Internet
Explorer 8 and earlier versions.</p>
</body>
</html>
====
如果想插入显示一个文件或网页，可以用 <iframe>, 而不是用 画布<canvas>,
例如：
<iframe src="这里写网页的URL"></iframe>
<canvas id="t_con" height="200px" width="200px"></canvas><script>
var ele = document.getElementById("t_con")
var ctx = ele.getContext("2d")
// 字号为60px ,字体为impact
ctx.font = "30px impact"
//将文本填充为棕色
ctx.fillStyle = "#960"
//将文本设为居中对齐
ctx.textAlign = 'center' //规定变换 *** 控点的位置
//设置文字
ctx.fillText("Happy Trails!", 100, 55, 400)//参数为fillText(文本内容, 变换 *** 控点的x坐标, 变换中心的y坐标, 文本最大宽度)
</script>
//获取canvas对象var c=document.getElementById("myCanvas")
//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var ctx=c.getContext("2d")
ctx.beginPath()
ctx.arc(95,50,40,0,2*Math.PI)
//设置字体大小和字体样式
ctx.font="30px Arial"
//设置文本
ctx.fillText("Hello World",10,50)
ctx.stroke()
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）