HTML5学习笔记----Day02

画布

canvas使用步骤： 1、创建canvas标签： 2、使用js在canvas上绘制图像： canvas绘制路径： 1、绘制一条直线： 2、绘制一个图形： 3、绘制闭合图形并填充颜色： canvas绘制圆： API： canvas绘制线性渐变背景： API： 1、如何设置渐变方向： 2、渐变色绘制： 1、垂直渐变： 2、横向渐变： 3、斜线渐变： canvas绘制放射型渐变背景 API： 绘制演示： canvas绘制图像 API：绘制演示： 补充

   HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。    学习目标：Canvas绘制路径、矩形、圆形、字符、渐变背景、添加图像、其他绘制方法

canvas使用步骤：

1、创建canvas标签：

<canvas id="mypaper" width="500px" height="500px"> </canvas>

2、使用js在canvas上绘制图像：

<script> var paper = document.getElementById("mypaper")//获取画布 var paint = paper.getContext("2d");//获取画笔 paint.fillStyle = "#ff0000"//设置画笔颜色 paint.fillRect(100, 200, 100, 300)//绘画 </script>

canvas绘制路径：

1、绘制一条直线：

<script> var paper = document.getElementById("mypaper") var paint = paper.getContext("2d"); paint.moveTo(10, 10) paint.lineTo(100, 200) paint.stroke() </script>

为什么要使用getContext(‘2d’) Canvas WebApi参考

2、绘制一个图形：

<script> var paper = document.getElementById("mypaper") var paint = paper.getContext("2d"); paint.moveTo(10, 10) paint.lineTo(100, 200) paint.lineTo(50,200) paint.lineTo(10,10) paint.stroke() </script>

3、绘制闭合图形并填充颜色：

<script> var paper = document.getElementById("mypaper") var paint = paper.getContext("2d"); paint.fillStyle = "#ff00ff" paint.moveTo(10, 10) paint.lineTo(100, 200) paint.lineTo(300,100) paint.lineTo(10,10) paint.fill() </script>

canvas绘制圆：

API：

CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。 圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束 void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

参数名作用x圆弧中心（圆心）的 x 轴坐标y圆弧中心（圆心）的 y 轴坐标radius圆弧的半径startAngle圆弧的起始点， x轴方向开始计算，单位以弧度表示endAngle圆弧的终点， 单位以弧度表示anticlockwise可选的Boolean值 ，如果为 true，逆时针绘制圆弧，反之，顺时针绘制 <script> var paper = document.getElementById("mypaper") var paint = paper.getContext("2d"); paint.fillStyle = "#ffbb00"//设置画笔颜色 paint.arc(200,200,100,0,Math.PI * 2,true)//设置绘制路径 paint.fill()//开始绘制 </script>

canvas绘制线性渐变背景：

API：

CanvasRenderingContext2D.createLinearGradient()方法创建一个沿参数坐标指定的直线的渐变。该方法返回一个线 CanvasGradient对象。 CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);

1、如何设置渐变方向：

createLinearGradient(start-x,start-y,end-x,end-y) 线性渐变是由createLinearGradient()方法里的坐标参数来确定的，一个起始坐标（start-x,start-y），一个结束坐标(end-x,end-y)。

2、渐变色绘制：

1、垂直渐变：

<script> var paper = document.getElementById("mypaper") var paint = paper.getContext("2d"); var gcolor = paint.createLinearGradient(0,0,0,300)//关键代码 gcolor.addColorStop(0,"#ff0000") gcolor.addColorStop(0.5,"#00ff00") gcolor.addColorStop(1,"#000000") paint.fillStyle = gcolor; paint.fillRect(0,0,300,300) </script>

2、横向渐变：

<script> var paper = document.getElementById("mypaper") var paint = paper.getContext("2d"); var gcolor = paint.createLinearGradient(0,0,300,0) gcolor.addColorStop(0,"#ff0000") gcolor.addColorStop(0.5,"#00ff00") gcolor.addColorStop(1,"#000000") paint.fillStyle = gcolor; paint.fillRect(0,0,300,300) </script>

3、斜线渐变：

<script> var paper = document.getElementById("mypaper") var paint = paper.getContext("2d"); var gcolor = paint.createLinearGradient(0,0,300,300) gcolor.addColorStop(0,"#ff0000") gcolor.addColorStop(0.5,"#00ff00") gcolor.addColorStop(1,"#000000") paint.fillStyle = gcolor; paint.fillRect(0,0,300,300) </script>

稍微调整一下斜线角度

<script> var paper = document.getElementById("mypaper") var paint = paper.getContext("2d"); var gcolor = paint.createLinearGradient(0,0,300,100) gcolor.addColorStop(0,"#ff0000") gcolor.addColorStop(0.5,"#00ff00") gcolor.addColorStop(1,"#000000") paint.fillStyle = gcolor; paint.fillRect(0,0,300,300) </script>

canvas绘制放射型渐变背景

API：

CanvasRenderingContext2D.createRadialGradient() 是 Canvas 2D API 根据参数确定两个圆的坐标，绘制放射性渐变的方法 CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

参数名作用x0开始圆形的 x 轴坐标y0开始圆形的 y 轴坐标r0开始圆形的半径x1结束圆形的 x 轴坐标y1结束圆形的 y 轴坐标r1结束圆形的半径

绘制演示：

<script> var paper = document.getElementById("mypaper") var paint = paper.getContext("2d"); var gcolor = paint.createRadialGradient(200,200,40,200,200,150) gcolor.addColorStop(0,"red") gcolor.addColorStop(1,"white") paint.fillStyle = gcolor; paint.arc(200,200,200,0,Math.PI*2,false); paint.fill() </script>

canvas绘制图像

API：

Canvas 2D API 中的 CanvasRenderingContext2D.drawImage() 方法提供了多种方式在Canvas上绘制图像。 参考官方语法

绘制演示：

<canvas id="mypaper" width="1500px" height="1500px"> </canvas> <script> var paper = document.getElementById("mypaper") var paint = paper.getContext("2d"); var img = new Image(); img.src = "./images/test.jpg" paint.drawImage(img,0,0,400,250) </script>

补充

canvas更多用法参考