HTML5+CSS3网页设计基础教程第5章 图形图像绘制

HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第21页
5.4 绘制变形图形

5.4.1 5.4.2 5.4.3 5.4.4 5.4.5
保存与恢复canvas状态 移动坐标空间 旋转坐标空间 缩放图形 矩阵变换
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第22页
第4页
5.1 canvas元素基础


5.1.1 5.1.2 5.1.3 5.1.4
添加canvas元素 检测浏览器支持 使用Canvas绘制图形 Canvas坐标系
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第5页
5.1.1 添加canvas元素

在HTML页面中添加canvas元素的方法和其他元素的添加 一样，代码如下：
addColorStop方法的使用如下：
CanvasGradient.addColorStop(offset, color)
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第31页
5.5.3 绘制径向渐变

径向渐变，其实就是环形的渐变，由圆心（或者 是较小的同心圆）开始向外扩散渐变的效果。线 性渐变指定了起点和终点，径向渐变则指定了开 始的结束园的圆心和半径。径向渐变使用 createRadialGradient来获得Canvas的 CanvasGradient对象，所以addColorStop方法 也是通用的。使用方法如下：
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第14页
5.2.4 绘制三角形

和绘制矩形一样，绘制三角形可以是实心的，也可以是空 心的（也就是没填充色，光有轮廓线）。绘制实心三角形 使用fill()方法，绘制空心三角形用stroke()方法。
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
5.5.2 绘制线性渐变


前面绘制过程中使用到了一些线条的方法和属性。 通过lineWidth、lineCap、lineJoin、 miterLimit属性，可以设置线条的粗细、端点样 式、两线段链接处样式和绘制交点的方式。 createLinearGradient方法的使用如下：
CanvasGradient = ctx.createLinearGradient(x0, y0, x1, y1)
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第13页
5.2.3 绘制弧线与圆形

HTML5提供了专门用于绘制圆形或弧线的arc方法和 arcTo方法。arc方法的使用格式如下：
arc(x, y, radius, startRad, endRad, anticlockwise)

在canvas画布上绘制以坐标点(x,y)为圆心、半径为 radius的圆上的一段弧线。这段弧线的起始弧度是 startRad，结束弧度是endRad。这里的弧度是以x轴正 方向(时钟三点钟)为基准、进行顺时针旋转的角度来计算 的。anticlockwise表示是以逆时针方向还是顺时针方向 开始绘制，如果为true则表示逆时针，如果为false则表 示顺时针。anticlockwise参数是可选的，默认为false， 即顺时针。
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第9页
主要内容
5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 canvas元素基础 绘制简单图形 绘制贝塞尔曲线 绘制变形图形 丰富图形效果 图像处理 绘制文字 本章小结
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
<canvas id="canvas1" width="400" height="300"></canvas>
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第6页
5.1.2 检测浏览器支持

并不是所有的浏览器都支持canvas元素，因此，在使用 时需要先进行检测。检测的方法有两种：一种是为不支持 canvas元素的浏览器提供替代显示的内容；另一种是使 用JavaScript代码进行检测。
第5章 图形图像绘制
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第1页
本章概述


canvas是HTML5的一个新增元素。通过canvas 元素，用户可以在Web中绘制各种图形。虽然以 前也有基于XML的绘图技术，如VML何SVG等， 但canvas是基于像素的绘制，开发者通过 Javascript脚本可以轻松绘图。 绘制图形时，在页面上放置一个canvas元素，就 相当于在页面上放置了一块画布，可以在这块画 布中进行绘制图形，但是并不是用鼠标进行画图， 实际上，canvas只是一块无色透明的区域，只是 一个javascript API，需要通过javascript编写绘 制图形的脚本。本章就来介绍canvas元素的使用。
第5章 图形图像绘制
第16页
主要内容
5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 canvas元素基础 绘制简单图形 绘制贝塞尔曲线 绘制变形图形 丰富图形效果 图像处理 绘制文字 本章小结
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第17页
5.3 绘制贝塞尔曲线
5.3.1 二次贝塞尔曲线 5.3.2 三次贝塞尔曲线
ห้องสมุดไป่ตู้第15页
5.2.5 清空画布

清空画布的方法有以下3种：
► 第一种，也就是最简单的办法，由于canvas每当高度或宽度被重 设时，画布内容就会被清空。 ► 第二种方法，使用clearRect方法。 ► 第三种方法，类似于方法2，可以用某一特定颜色填充画布，从而 达到清空的目的。
HTML5+CSS3网页设计基础教程
第29页
5.5.1 应用不同的线型

前面绘制过程中使用到了一些线条的方法和属性。 通过lineWidth、lineCap、lineJoin、 miterLimit属性，可以设置线条的粗细、端点样 式、两线段链接处样式和绘制交点的方式。
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第30页
context.translate(dx,dy);
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第24页
5.4.3 旋转坐标空间

若要旋转坐标空间，应使用rotate方法。rotate方 法用于以原点为中心旋转canvas，实质仍是旋转 canvas上下文对象的坐标空间，用法如下：
context.rotate(angle);
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第8页
5.1.4 Canvas坐标系

在canvas元素中绘制图形时，需要为图形指定摆放位置。 fillRect(50,50,100,100)的前两个参数就是指定所绘制矩 形的x轴和y轴坐标值。在canvas中，坐标原点（0,0）位 于canvas元素的左上角，x轴水平向右延伸，y轴向下延 伸。
5.4.1 保存与恢复canvas状态

可以通过下面两个方法来实现保存绘图属性和获 取属性：
context.save(); context.restore();
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第23页
5.4.2 移动坐标空间

canvas坐标空间默认以画布左上角(0,0)为 原点，x轴水平向右为正向，y轴垂直向下 为正向，该坐标空间的单位通常为像素。 在绘制图形时，可以使用translate方法移 动坐标空间，使画布的变换矩阵发生水平 和垂直方向的偏移，其用法如下：
context.transform(m11,m12,m21,m22,dx,dy);
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第27页
主要内容
5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 canvas元素基础 绘制简单图形 绘制贝塞尔曲线 绘制变形图形 丰富图形效果 图像处理 绘制文字 本章小结
第10页
5.2 绘制简单图形



5.2.1 5.2.2 5.2.3 5.2.4 5.2.5
绘制直线 绘制矩形 绘制弧线与圆形 绘制三角形 清空画布
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第11页
5.2.1 绘制直线

在canvas上绘制简单直线，主要用到3个方法：moveTo、 lineTo和stroke。如果要设置直线端点的样子，可以使用 lineCap属性指定。

三次贝塞尔曲线则需要使用到3个控制点，绘制方 法如下：
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第20页
主要内容
5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 canvas元素基础 绘制简单图形 绘制贝塞尔曲线 绘制变形图形 丰富图形效果 图像处理 绘制文字 本章小结
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第7页
5.1.3 使用Canvas绘制图形

canvas元素本身并不能实现图形绘制功能，绘制图形的 工作需要由JavaScript来完成。使用JavaScript可以在 canvas元素内部添加线条、图片和文字，也可以在其中 绘画，还能够加入高级动画。
第5章 图形图像绘制
HTML5+CSS3网页设计基础教程
第2页
本章的学习目标

理解与canvas元素相关的基础知识 使用canvas元素绘制简单图形 使用canvas元素绘制贝塞尔曲线 使用canvas元素绘制变形图形 使用canvas元素添加丰富图形效果 使用canvas元素对图像进行处理 使用canvas元素对图形图像进行组合和混合操作 使用canvas元素将文字绘制到Web上 使用canvas绘图时状态的保存与恢复
第5章 图形图像绘制
HTML5+CSS3网页设计基础教程
第3页
主要内容
5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 canvas元素基础 绘制简单图形 绘制贝塞尔曲线 绘制变形图形 丰富图形效果 图像处理 绘制文字 本章小结
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制

HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第18页
5.3.1 二次贝塞尔曲线

绘制贝塞尔曲线需要用到quadraticCurveTo()方法，使 用方法如下：
quadraticCurveTo(cpx,cpy,x,y)
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第19页
5.3.2 三次贝塞尔曲线
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第28页
5.5 丰富图形效果
5.5.1 5.5.2 5.5.3 5.5.4 5.5.5 5.5.6

应用不同的线型 绘制线性渐变 绘制径向渐变 绘制图案 设置图形的透明度 创建阴影
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
CanvasGradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第25页
5.4.4 缩放图形

缩放图形主要通过scale()方法来实现，具体使用 格式如下：
ctx.scale(x,y);
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第26页
5.4.5 矩阵变换

矩阵变换主要通过transform()方法来实现。 setTransform方法用于将当前的变化矩阵重置为 最初的矩阵，然后以相同的参数调用transform 方法，即先set（重置），再transform（变换） 具体使用格式如下：
HTML5+CSS3网页设计基础教程
第5章 图形图像绘制
第12页
5.2.2 绘制矩形

绘制矩形时，需要用到fillStyle属性、fillRect方法，还可 以使用strokeStyle和strokeRect方法。其中，fillStyle属 性用于指定填充颜色；fillRect方法用于以指定的填充颜 色绘制一个矩形；strokeStyle指定边框线颜色； strokeRect以指定的颜色绘制矩形轮廓。