热搜:NVER node 开发 php

自学HTML5第四节(canvas画布详解)_html/css_WEB-ITnose

2024-11-21 15:55:01
自学HTML5第四节(canvas画布详解)_html/css_WEB-ITnose

canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始。。。。

先看看啥玩意叫做canvas 

什么是 Canvas?

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

 

创建一个canvas

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度:

矩形的绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

   

1. fillRect()

2. strokeRect()

线条

通过指定从何处开始,在何处结束,来绘制一条线:

   
Your browser does not support the canvas element.1. lineWidth

圆形

   

渐变

   
Your browser does not support the canvas element.

图像