HTML5技术

HTML5 Canvas:初始Canvas - 救火队长

字号+ 作者:H5之家 来源:H5之家 2017-08-16 18:00 我要评论( )

Canvas Canvas 元素 Canvas 中文翻译为:画布。 canvas id=yourCanvasIdwidth=300height=150/ Canvas Canvas - 01 body { background #canvas { margin padding background border width height Canvas not supported ),ctx );ctx.font ;ctx.fillStyle ;ctx.

Canvas

 

Canvas 元素

Canvas 中文翻译为:画布。

 

<canvas id=”yourCanvasId” width=”300” height=”150” />

Canvas

Canvas - 01 body{ background #canvas{ margin padding background border width height Canvas not supported ), ctx ); ctx.font; ctx.fillStyle; ctx.strokeStyle; ctx.fillText(); ctx.strokeText();

我们期望的结果是这样的: 

 

 

而实际的执行结果:

 

 

其实我认为可以这样理解它,它是一个放映布,因为真正的绘图不在它上的,而是在一个绘图板上,绘图完毕投影到放映布上。这一点,类似于我们中学时候用过的幻灯片放映机,在一张玻璃板(绘图板)上写上习题,然后投影到放映布或者白墙上(画布)。

 所以呢,这样一想,就明白了,当css

  

Canvas 元素目前有三个方法:

 

 

 

 

通过getContext(“2d”);

 通过getContext(“3d”);

 

在随后的文章里,将会学习使用Canvas画图的必要知识。

CanvasRenderingContext2D API 详情:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

 

 

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

相关文章
  • HTML Canvas:基本操作 - 救火队长

    HTML Canvas:基本操作 - 救火队长

    2017-08-16 18:00

  • canvas一周一练 -- canvas绘制太极图(6) - 张不丢

    canvas一周一练 -- canvas绘制太极图(6) - 张不丢

    2017-08-16 09:00

  • 【canvas学习笔记四】绘制文字 - 池月

    【canvas学习笔记四】绘制文字 - 池月

    2017-08-15 11:00

  • HTMl5的sessionStorage和localStorage - 六一儿童节

    HTMl5的sessionStorage和localStorage - 六一儿童节

    2017-08-14 11:00

网友点评
"