零基础学做网站培训介绍

当前位置:

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,矩形的左上角坐标和宽高。

2条回应:“html5做网站:怎样用HTML5在网页图片上写文字”

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

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

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

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

发表评论

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

相关教程

  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • canvas是html5中比较重要的一个标签,canvas的实现需要借助原生态的js特效代码才能很好的展示出来。今天学做网站论坛就给大家讲一讲如何使用html5中ca
  • 怎样在网页中嵌入表格 视频教程 (1114020 次浏览)
    网站如果需要使用一些数据时,使用表格来显示是特别好的方法。表格的优点在于它可以简洁明了地将图片、文本、数据和表单有序的显示在页面上,在不同的
  • 网页如何添加背景音乐 视频教程附件下载 (1110830 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • HTML文字倾斜标签是什么 (122596 次浏览)
    HTML文字倾斜标签是什么?我们在做网站时,有的文字需要倾斜显示,这时就需要使用HTML文字倾斜标签了。HTML斜体标签:HTML 斜体标签元素知识与