前端图形:SVG与Canvas( 四 ) _生活百科

文章插图

MDN：Canvas 教程

2.1、canvas APIcanvas 属性/方法描述height、width元素高度、宽度：<canvas width="400" height="400"></canvas>getContext(contextType)获取用于绘制的渲染上下文，contextType： "2d"：CanvasRenderingContext2D 二维渲染上下文 "webgl"： WebGLRenderingContext 三维渲染上下文，OpenGL ES 2.0 "webgl2"：WebGL2RenderingContext 三维渲染上下文，OpenGL ES 3.0CanvasRenderingContext2DfillStyle填充（内部）颜色 ctx.fillStyle='rgba(250,0,0,0.6)'strokeStyle画笔（边框）颜色 ctx.strokeStyle='red'，同上，支持color、渐变色画刷、图片画刷font字体设置 ctx.font = "bold 48px serif"lineWidth线宽 ctx.lineWidth = 15;toDataURL(type, quality)可以将canvas绘制的图形转换为Data URI 格式的图像，从而导出为位图文件基础图形绘制fillRect(x, y, width, height)填充一个矩形strokeRect(x, y, width, height)绘制一个矩形框clearRect(x, y, width, height)清除指定区域的的像素fillText(text, x, y, [maxWidth])填充文本strokeText(text, x, y [, maxWidth])绘制文本（轮廓）drawImage()绘制位图路径绘制①创建路径 >** ②创建路径> ③**渲染路径beginPath()开始一个新的路径，清除已有路径列表closePath()闭合一个路径moveTo(x, y)移动画笔到坐标x、ylineTo(x, y)画线到坐标x、yellipse(x, y, radiusX, radiusY,r,sa,ea)椭圆路径 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)rect(x, y, width, height)矩形路径arc(x, y, radius, startAngle, endAngle)绘制圆弧路径quadraticCurveTo(cp1x, cp1y, x, y)二次贝塞尔曲线fill([path], [fillRule])填充当前、已存在的路径stroke([path])描边子路径Path2D可以单独申明一个路径对象，支持上面的绘制，还支持SVG的path数据。

<canvas id="canvas" width="400" height="400"></canvas><script>	ctx = document.getElementById('canvas').getContext('2d');	// ctx.alpha = false;	ctx.fillStyle = 'rgba(250,0,0,0.6)';	ctx.fillRect(10, 10, 40, 40);	ctx.fillRect(30, 30, 40, 40);	ctx.strokeStyle = 'red';	ctx.lineWidth = 3;	ctx.strokeRect(90, 10, 150, 50);	ctx.fillStyle = 'rgba(0,0,250,0.5)';	ctx.font = '20px 微软雅黑';	ctx.fillText("文本Text", 120, 40)	//path	ctx.beginPath();	ctx.moveTo(90, 80);	ctx.lineTo(90, 200);	ctx.lineTo(190, 200);	ctx.closePath();	ctx.arc(120, 120, 50, 0, 360);	ctx.fill();</script>