学做网站培训课程介绍

当前位置:

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

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

选择课程播放速度:

怎样在网页图片上写文字

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

怎样在网页图片上写文字

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

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

把图片设为背景,代码如下:

<body>
<table><tr>
<td width="137" height="46" background="http://img.baidu.com/img/logo-zhidao.gif">这里是文字内容</td>
</tr></table>
</body>

这种设置背景图片的方法现在很少使用了,在我们的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,矩形的左上角坐标和宽高。

《“html5做网站:怎样用HTML5在网页图片上写文字”》 有 2 条评论

  1. 学习建网站学员 。。。。。。说道:

    老师你好,我问一下这个视频直接介绍了有背景框的情况,然后删除之后还是有那个框,添加的时候也只是在里面加上了而已,我想问一下如果什么都没有的情况下,怎么加背景图片

    • 学做网站论坛讲师 学做网站讲师说道:

      直接设置body的背景图片即可!body{background:url();}

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注