canvas教程

canvas学习日记一,canvas学习日记

字号+ 作者:H5之家 来源:H5之家 2015-09-08 17:08 我要评论( )

canvas学习日记一,canvas学习日记。canvas学习日记一,canvas学习日记 由于工作的需求,促进我学习html5 canvas技术,canvas是html5最强大的元素之一。使用它可

canvas学习日记一,canvas学习日记

    由于工作的需求,促进我学习html5 canvas技术,canvas是html5最强大的元素之一。使用它可以在浏览器中做一番奇妙的事情。大家或多或少都听过canvas的强大用处,我这里就不再赘述了。

    canvas的强大功能是通过canvas的context对象表现出来的,该环境变量是可以从canvas元素身上获取。

    下面先看一个canvas的例子方便讲解;在canvas上显示一个字符串,该字符串大致与canvas水平垂直居中。代码如下:

canvas body #canvas canvas not supported

    在上述的html代码中还使用了css对canvas来设置相应的背景色等其他css属性。所以canvas跟其它的div,h1等元素一样可以设置css样式。canvas有趣的不是在于其可以设置才算是样式,而是在于javascript代码,下面我上述的html中的canvas写程序了。代码如下:

    

<script type="text/javascript"> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); context.font = '38pt Arial'; context.fillStyle = 'cornflowerblue'; context.strokeStyle = 'blue'; context.fillText('Hello Canvas', canvas.width / 2 - 150, canvas.height / 2 + 15); context.strokeText('Hello Canvas', canvas.width / 2 - 150, canvas.height / 2 + 15); </script>  

上面的javascript代码主要有三步:
1.使用document.getElementById方法获取canvas元素。
2.在canvas对象上调用getContext('2d')方法,获取绘图环境变量
3.使用绘图环境对象在canvas元素上进行绘制。

fillStyle与strokeStyle是指定图形填充,路径描边时所使用的颜色,渐变或图案。

fillText()和strokeStyle都需要3个参数:要绘制的文本内容,以及在canvas中显示文本的横纵坐标。

ps:在是设置canvas的宽度和高度的时,不能使用px后缀,虽然很多浏览器支持使用px后缀,但是从技术上来说不被canvas规范接受,而且这些取值只能是非负数。

在给canvas设置宽高的时候,有两种方法:一是直接给canvas的width和height指定属性值;二是在css中设置width和height。但是,这种设置会产生意外的效果。这里就引出了,canvas元素的大小与绘图表面的大小。如图:


蒙了吧,两个元素大小一样,绘制的图却不同。其实主要是修改width和height属性来设置canvas元素的大小,这样的话,元素自身与绘画表面的大小都会被设置成属性值。而通过css来设置的width和height值只是修改了元素的大小并没有修改绘画表面的大小,因此,浏览器会将绘画表面从默认值(300*150)拉伸到修改后的值(600*300)。

canvas是个很强大的元素,我现在所知道的只是认识canvas这个元素,需要学习的还很长,day day up吧。

 


找一篇学习日记

日记一则
我即将步入知识的殿堂,成为一名合格的中学生,但我不择校。我选择的是离家近的一所普通学校。
暑假期间,有许多同学急切地择校,他们每天谈的也是择校。他们的父母走关系花钱择校,每天为了择校日夜奔波。我的心情却很平淡,冷眼旁观。我早已说服妈妈不择校,家里靠爸爸一个人养家糊口,钱来之不易。每个月的开销大,还要还贷款,另外奶奶生病了,我就更不能择校了,应该把妈妈准备给我择校的钱存起来给奶奶治病。
就算择校学习成绩也不一定优秀,例如:有的人以为进了好资源的学校,以为进了保险箱,就放松警惕,不好好学习,结果成绩一落千丈。选择一所好的学校固然重要,但是事在人为,任何事物的发展靠内因,取得好的成绩归根结底靠自身努力。所以我坚持不择校,并做好了开学的准备工作。只要我刻苦、认真、虚心好学,我相信,我一定能成为一名成绩优异的好学生。
就要开学了,为了证明给大家看,我从暑假开始制定了一套学习计划。一、带着阳光上路,以高昂的热情迎接新学校,拥抱我的初中之旅,放下沉重的思想包袱,带着微笑,带着理想,轻装上阵。二、做好学业的准备,我利用暑假时间已经自学了初一的主要课程,做好了记录,对学习中的难点作了记载,梳理出即将要学习的课程的纲要。三、买一本美文摘选,在文章中漫游,并积累一些好词好句,学会应用。四、购买自行车自己上学。五、“一寸光阴一寸金”,充分地利用每一秒时间。
就要开学了,我已经准备好了迎接新的学校、新的开始。让阳光带着我成为一名优秀的初中生吧!
日记二则
我家养了两只乌龟,一大一小,它们一起吃食,一起玩耍,十分可爱。

每天晚上,我做的第一件事,就是到厨房弄点好吃的东西喂那两只机灵的乌龟。你看,两只小家伙,仿佛听到了我的脚步声,它们早就急匆匆的爬过来,等候着我给它喂食。只见它伸着长长的脖子,张着尖尖的嘴巴,好像在跟我说:“我已经一天没有吃东西了,肚子早唱空城计了,快给我吃。”这时我故意逗它们玩,我把食物东摆摆西放放,那两只乌龟跟着食物费劲地跑,看到它们的样子真好笑,直致电我玩过瘾了才把食物给它们吃。它们吃得津津有味。那只大乌龟真霸道。它已经吃了好多,生怕吃不饱,就把不小乌龟挤到一旁去,自已大口大口地吃。这时,我看到乌龟怪可怜的,就把龟推开,让小乌龟吃个饱,小乌龟似乎非常感激我,一边吃一边摆着小尾巴。

吃完了食物它们又兴致勃勃地玩了起来。你看,那只小乌龟胆子也太大了,竟然爬到大乌龟的背上,大乌龟一点也不反抗,还背着它慢慢地爬呢。也许大乌龟感到太累,突然脖子一伸顶住缸底翻了个身,小乌龟就摔下来。可小乌龟不罢休,还是往大乌龟身上爬,大乌龟也没办法,只好让小乌龟去了,直到玩够了,就在玻璃缸一角睡觉了。

千年乌龟万年松,这只小乌龟已养了六年多了,它已成了我的小伙伴,它将陪伴着我成长,如果我能像章它一样长寿那该多好啊!可以把美好的世界看个够 。

总结一个学期的学习日记

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • 学习慕课网canvas倒计时实例笔记

    学习慕课网canvas倒计时实例笔记

    2017-04-30 14:01

网友点评
r