html5做网站：怎样用HTML5在网页图片上写文字

以下为学做网站论坛关于“html5做网站：怎样用HTML5在网页图片上写文字”讲解视频教程。

在做网站过程中，如果想在一张网页上实现图片加文字的格式，就需要通过Dreamweaver CS6版软件设置背景图片。可以在网页上添加背景图片，然后在背景图片上添加文字。

在DW制作网页中，图片在网页中一般有两种方式显示：

• 一种是直接插入到网页中；
• 一种就是设为网页的背景(background)；（相关视频教程：如何给网页添加背景图片）

直接插入的图片是不能在上面加文字的，只有把图片设为网页背景图片，才能在图片上写文字。

把图片设为背景，代码如下：

这种设置背景图片的方法现在很少使用了，在我们的DIV+CSS教程中会讲到怎么通过CSS来设置背景图片。

除了上面的背景图片之外，还可以使用HTML5的canvas 元素进行图片上写内容。

使用<canvas>必须先设置其width和height属性，指定可绘图区域大小,只指定宽高不添加样式或者绘制图像的话，在页面中将看不到该元素。

<canvas id='draw' width='200px' height='200px'></canvas>

2、绘制图像的话，我们首先要取到canvas并调用getContext()方法，然后传入上下文名字（2D/3D）,2D有两种基本绘图操作|填充(fillStyle)|描边(strokeStyle)|，这两个属性默认值为#000

var draw = document.getElementById('draw');

//确认浏览器是否支持<canvas>元素

if(draw.getContext){

var context = draw.getContext('2d');

//给context绘制红色的边框

context.strokeStyle = '#f00';

//内部填充大草原的颜色

context.fillStyle = '#0f0';

}

3、使用toDataURL()方法，可以导出<canvas>元素上绘制的图像

var draw = document.getElementById('draw');

if(draw.getContext){

//显示图像，toDataURL()获取到的是一串base64的字符串

var drawURL = draw.toDataURL('image/png');

var image = document.createElement('img');

image.src = drawURL;

document.body.appendChild(image);

}

4、绘制矩形，主要有三个方法，fillRect()为矩形填充颜色、strokeRect()为矩形描边、clearRect()清除矩形。这三个方法都接收4个参数x/y/w/h，矩形的左上角坐标和宽高。