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画布时一定要设置画布的宽高。

相关文章
|
1月前
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
59 29
|
30天前
|
移动开发 前端开发 HTML5
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
18 1
|
2月前
|
Web App开发 移动开发 前端开发
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
52 5
|
3月前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
39 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
3月前
|
移动开发 前端开发 HTML5
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸,十秒数字倒计时,全屏倒计时动画效果,给人一种非常大气的视觉感
56 0
HTML5 Canvas制作的粒子十秒倒计时源码
|
3月前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
46 5
|
4月前
|
人工智能
|
4月前
html基础知识学习
html基础知识学习
49 0
|
移动开发 前端开发 API
《HTML5 Canvas游戏开发实战》——3.4 小结
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.4节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1007 0
|
移动开发 JavaScript 前端开发
《HTML5 Canvas游戏开发实战》——3.3 自定义画板
本节书摘来自华章计算机《HTML5 Canvas游戏开发实战》一书中的第3章,第3.3节,作者:张路斌著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1378 0

热门文章

最新文章