HTML5之绘图标签canvas

主讲：方丹2020年2月22日星期六HTML5之绘图标签canvas目录认识canvas11绘制简单的图形（重点）22canvas常用方法331认识canvas1、canvas标签canvasid=“myCanvasheight=300width=300您的浏览器不支持canvas标签/canvas1认识canvas2、检查浏览器支持性canvasid=myCanvaswidth=200height=100/canvasscripttype=text/javascriptvarcanvas=document.getElementById(myCanvas);if(canvas.getContext){alert(您的浏览器支持Canvas!);}else{alert(您的浏览器不支持Canvas!);}/script2绘制简单的图形（重点）1、绘制直线2认识canvas举一反三：绘制下图如示图形2认识canvas2、绘制矩形2认识canvascanvas坐标（0,0）（50,25）2认识canvas举一反三：绘制如下图形（有填充有边框）重要提示：context.lineWidth=“10”;（设置线条宽度）2认识canvas3、绘制圆2认识canvas圆的角度坐标2认识canvas举一反三：绘制如下图形3canvas常用方法方法描述fillStyle设置填充绘画的颜色、渐变或模式strokeStyle设置笔触的颜色、渐变或模式lineWidth设置线条宽度fill()填充当前绘图（路径）stroke()绘制已定义的路径moveTo()把路径移动到画布中的指定点，不创建线条lineTo()添加一个新点，创建从该点到最后指定点的线条3canvas常用方法方法描述fillRect()绘制被填充的矩形strokeRect()绘制矩形（无填充）arc()创建弧/曲线（用于创建圆形或部分圆）beginPath()起始一条路径，或重置当前路径closePath()创建从当前点回到起始点的路径总结本讲主要学习了canvas绘图功能的应用。作业1、完成课件的案例。2、自己尝试绘制其它图形。