1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html中怎样添加矩形标注 – CSS – 前端 代码和css转跳快捷键

html中怎样添加矩形标注 – CSS – 前端 代码和css转跳快捷键

时间:2022-08-06 18:08:18

相关推荐

html中怎样添加矩形标注 – CSS – 前端 代码和css转跳快捷键

Cavas的英文解释是画布,使用这个Html5的Canvas标签可以创建画布,结合JavaScript可以画出很多图形,大家先以画一个蓝色矩形为例,说明一下这个标签的使用方法,

首先需要建立一个HTML5的网页,方法是:

进入DW后,选择:文件–>新建

在弹出的对话框中选择文件类型为Html5

选择“创建”后,即会形成一个空白网页,选择“文件”–"保存“

起名为:juxing

这个名字可以依据自己的喜好起,但最好名字与网页内容相关,以后好找,另外一个需要注意的是,最好不用汉字。

大家将视图切换为”代码“视图

并将标题改为”画出矩形“

标题也可以依据自己的喜好进行设定,并不影响网页的运行。

Html是标记型语言,各种功能都需要在对应的标签里面才可以,所以大家首先需要添加标签。

大家只需输入<c,就会看到提示列表里出现大家所需要的标签canvas,按下回车键,即可完成输入。

之后,大家每一次按下空格、或输入相关字母,都会有提示列表,大家只需选择所需的项目,按下回车即可,并不需要完整输入字串,可以避免输入时的拼写错误。在本例中,只有引号内的”mycanvas“是需要完整输入的,其他部分的关键字都可以通过提示列表进行输入。

命令为:<canvas width="600" height="400"></canvas>

只有Canvas标记是不能直接画出图来的,需要配合JavaScript语言,首先需要写出对应的程序标记。

Html语言中的标记都是成对出现的,大家为了避免错误,可以先将标记的起始、标记的结束写好

写好前后标记后,大家就可以在标记中使用JavaScript语言,调用Canvas标记,画出大家所需要图形了,方法是:

var canvas=document.getElementById(mycavas);

将变量canvas,赋值为大家之前在html中定义的画布”mycanvas,以方便JavaScript调用

var ctxt=canvas.getContext(2d);

将变量 ctxt赋值为利用刚定义的“canvas”返回的二维绘图环境对象,使用这个对象就可以绘图了

使用fillStyle方法设置颜色,是十六进制表示的三原色分量范围是从“#000000”至“FFFFFF”

ctx.fillStyle=#0066cc;

大家将颜色设置为一种蓝色,这个颜色也可以随自己喜好 更改。

ctx.fillRect(50,50,400,200);

填充的起始位置设置为(50,50),矩形宽度为400,高度为200

选择在浏览器中浏览后,即可看到大家所需要的矩形

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。