Web前端开发基础创新实践教程课件：绘制五角星.pptxVIP

Drawapentagram绘制五角星前端开发技术基础FundamentalsofWebFrontendTechnology

web前端技术基础1canvas标签box-sizing属性定义如何计算一个元素的宽度和高度。box-sizing的值包括：canvas标签的基本使用方法如下绘图上下文（Context）：在使用canvas绘制图形之前，通常是通过JavaScript的getContext()方法来获取一个绘图上下文对象。绘制图形：可以在canvas中绘制直线、矩形、圆、路径等各种图形。可以设置线条颜色、线宽、填充颜色等属性来定制图形的外观。渲染图像：可以使用绘图上下文的drawImage()方法在canvas中渲染图像。这对于创建图像画廊、游戏背景等非常有用。动画：通过在循环中不断更新canvas内容，可以创建动画效果。这可以通过改变图形的位置、样式或绘制不同的图形来实现。用户交互：可以监听canvas上的鼠标事件和触摸事件，以实现用户与图形的交互。例如，你可以检测用户点击或拖拽图形的操作。

web前端技术基础示例script //准备画布 varc=document.getElementById(myCanvas); //准备画笔 varctx=c.getContext(2d); //画笔颜色 ctx.fillStyle=#FF0000; //开始画图，先画个矩形 ctx.fillRect(10,10,180,80); //画条直线 ctx.strokeStyle=#2911a9 ctx.lineWidth=4 ctx.moveTo(0,100); ctx.lineTo(200,100); ctx.stroke(); //画一个圆圈 ctx.beginPath(); //arc（x，y，r，） ctx.arc(50,160,50,0,Math.PI/2); ctx.strokeStyle=orange ctx.lineWidth=4 ctx.stroke(); //绘制文本 ctx.font=40pxArial; ctx.strokeStyle=gray ctx.strokeText(我爱您中国,20,250); //绘制线性渐变 //Creategradient vargrd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,green); grd.addColorStop(1,white); ctx.fillStyle=grd; ctx.fillRect(10,300,150,80);/script

web前端技术基础1.2SVG语言SVG（ScalableVectorGraphics，可缩放矢量图形）是用于描述二维矢量图形的标记语言，与基于像素的位图图像不同，SVG图像使用几何形状、文本和其他可绘制对象的描述来表示图像。标签功能描述svgSVG图像的根元素。用于包裹所有SVG元素。可以设置图像的宽度、高度和视口大小等属性。rect用于绘制矩形。可以设置矩形的位置、宽度、高度、圆角等属性。circle用于绘制圆。可以设置圆心坐标和半径等属性。ellipse用于绘制椭圆。可以设置中心点坐标、横轴和纵轴半径等属性。line用于绘制直线。可以设置起始点和终止点的坐标。polyline用于绘制折线，即连接多个点的线段。polygon用于绘制多边形。通过指定多个点的坐标来绘制封闭的多边形。path用于绘制复杂的路径。通过定义一系列命令和坐标点来绘制任意形状。text用于绘制文本。可以设置文本的位置、样式、大小等属性。image用于插入位图图像。可以指定图像的URL、宽度、高度等属性。g用于创建一个组，可以将多个图形元素放入其中，方便进行统一的变换和样式设置。defs用于定义可重用的元素，例如渐变、滤镜等。use用于复用之前定义的元素，可以在SVG中多次使用同一个元素。pattern用于创建图案填充。mask用于创建遮罩效果。

web前端技术基础示例body !--绘制圆形--svgwidth=200height=200 circlecx=80cy=110r=50fill=red//svg !--绘制三角形--svgxmlns=width=200height=200style=border:1pxgraysolid;polygonpoints=100,2020,180180,180fill=blue//svg !--绘制椭圆形--svgxmlns=version=1.