欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-07 16:12:58
...
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.

图像