怎么在网页中创建canvas和文字？

<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>

HTML5新标签canvas来绘制文本文字可以这样做：

Shadows API 。

API 的属性为：

shadowColor：阴影颜色。其值和 CSS 颜色值一致。

shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。其效果和 Photoshop 的高斯模糊滤镜相同。

shadowOffsetX 和 shadowOffsetY：阴影的 x 和 y 偏移量

下面是HTML5代码部分

context.shadowOffsetX = 5

context.shadowOffsetY = 5

context.shadowBlur= 4

context.shadowColor = ‘rgba(255, 0, 0, 0.5)’

context.fillStyle = ‘#00f’

context.fillRect(20, 20, 150, 100)

在每个 canvas对象中都拥有一个 path 对象，定义完路径的轮廓，此时 canvas 画面中没有显示任何路径，开发人员需要继续调用 stroke()/fill() 函数来完成将路径渲染到画面的最后一步。路径的轮廓颜色和填充颜色由 strokeStyle 和 fillStyle 属性决定。还可以通过canvas文本在完成的图形上加上文字。推荐你一个视频吧啊，比我讲的清楚，搜一下“HTML5 矢量绘图新功能- Canvas 基本用法”

---