HTML5的学习之canvas画布(一)

简介: HTML5的学习之canvas画布 前面几篇博客我们一直在讲如何使用canvas绘制一下图片,但是没有讲过canvas如何使用,都有哪些属性,方法等。今天我们就来讲一讲canvas的有关属性和方法。 HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript)。 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本来完成实际的绘图任务。 getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。 接下来我们来学习一下这个对象的属性和方法,用于在画布上绘制文本、线条、矩形、圆形等等。 HTML代码: <

HTML5的学习之canvas画布




前面几篇博客我们一直在讲如何使用canvas绘制一下图片,但是没有讲过canvas如何使用,都有哪些属性,方法等。今天我们就来讲一讲canvas的有关属性和方法。



   HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript)。


   元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本来完成实际的绘图任务。


   getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。


  接下来我们来学习一下这个对象的属性和方法,用于在画布上绘制文本、线条、矩形、圆形等等。


HTML代码:

<canvasid="my_canvas"></canvas>

 

JS代码:


// 画布默认 宽300px 高150px // 获取元素varoCanvas=document.getElementById("my_canvas");
// 改变canvas默认的宽高oCanvas.width="1000";
oCanvas.height="1000";
// getContext() 返回对象  2d环境varmyCanvas=oCanvas.getContext("2d");


注意:canvas画布的默认宽高是300px*150px,所以我们在使用canvas画布时一定要设置画布的宽高。

相关文章
|
2月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
59 0
|
2天前
|
移动开发 HTML5
这些年没来得及学习的一些 HTML5 标签
【9月更文挑战第16天】HTML5 引入了许多新标签,增强了网页的功能与便利性。这些标签包括结构标签如 `&lt;header&gt;`(定义页眉)、`&lt;footer&gt;`(定义页脚)、`&lt;nav&gt;`(定义导航链接)、`&lt;section&gt;`(定义文档节)和 `&lt;article&gt;`(定义独立内容),以及多媒体标签 `&lt;audio&gt;` 和 `&lt;video&gt;`,用于播放音频和视频。此外,还有表单相关标签,如 `&lt;datalist&gt。
|
29天前
|
Dart 前端开发 Java
|
6天前
|
前端开发
在 HTML canvas 绘制文本
在 HTML canvas 绘制文本
8 0
|
1月前
HTML基础知识学习
HTML基础知识学习
29 1
|
26天前
|
移动开发 前端开发 JavaScript
|
30天前
|
JavaScript 算法 前端开发
学习 node.js 六 Markdown 转为 html,zlib
【8月更文挑战第19天】
12 0
|
2月前
|
自然语言处理 开发者 Python
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
|
3月前
杨老师课堂之网页制作HTML的学习入门-含有案例1
杨老师课堂之网页制作HTML的学习入门-含有案例
31 3
|
2月前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)