cavans图形绘制(直线、矩形、原型、贝塞尔曲线、渐变背景) 1：https://developer.aliyun.com/article/1547218
七、绘制二次贝赛尔曲线
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>canvas</title> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> </body> <script> <!-- 获取绘制元素--> var canvas=document.getElementById("myCanvas"); //获取canvas上下文 var ctx = canvas.getContext("2d"); //开始绘制 ctx.beginPath(); //设置起点 ctx.moveTo(20,20); //设置贝塞尔曲线控制点(20,100)和结束点(200,20) ctx.quadraticCurveTo(20,100,200,20); //绘制 ctx.stroke(); </script> </html>
八、三次贝塞尔曲线
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> </body> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); //开始绘制 ctx.beginPath(); //设置起点 ctx.moveTo(20,20); //绘制三次贝塞尔曲线，设置控制点(20,100)(200,100),设置结束点(200,20) ctx.bezierCurveTo(20,100,200,100,200,20); //绘制 ctx.stroke(); </script> </html>
九、绘制复杂贝塞尔曲线
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body onload="draw('canvas')"> <canvas id="canvas" width="300" height="400"> </canvas> </body> <script> function draw(id) { //获取元素 var canvas = document.getElementById(id); if (canvas == null) { return false; } //获取canvas上下文 var ctx = canvas.getContext('2d'); //设置填充颜色 ctx.fillStyle = "#eeeeef"; //填充矩形 ctx.fillRect(0, 0, 300, 400); var dx = 150; var dy = 150; var s = 100; //开始路径 ctx.beginPath(); //设置填充颜色 ctx.fillStyle = 'rgb(100,255,100)'; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 15 * 11; for (var i = 0; i < 30; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); //设置三次贝塞尔曲线控制点及添加一个点 ctx.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s,dx+x*s, dy + y * s); } //结束路径 ctx.closePath(); //填充背景色 ctx.fill(); //绘制 ctx.stroke(); } </script> </html>
十、线性渐变背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="myCanvas"></canvas> </body> <script> var canvas=document.getElementById("myCanvas"); var ctx = canvas.getContext('2d'); //创建一个线性渐变，设置渐变开始和结束的坐标 var grd = ctx.createLinearGradient(20,0,250,0); //设置渐变颜色，0为开始位置(20,0)，1为结束位置(250,0) grd.addColorStop(0,"black"); grd.addColorStop(0.25,"pink") grd.addColorStop(0.5,"red"); grd.addColorStop(0.75,"green") grd.addColorStop(1,"white"); //设置填充为线性渐变 ctx.fillStyle=grd; //绘制矩形 ctx.fillRect(20,20,150,100); </script> </html>
十一、径向渐变背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="myCanvas"></canvas> </body> <script> var canvas=document.getElementById("myCanvas"); var ctx = canvas.getContext('2d'); //创建一个径向渐变，设置渐变开市圆的圆心和半径、设置渐变结束圆心和半径 var grd = ctx.createRadialGradient(75,50,5,75,50,100); //设置渐变颜色，0为开始位置(75,50)，1为结束位置(75+100,50+100) grd.addColorStop(0,"rgb(0,0,0)"); grd.addColorStop(0.2,"rgb(0,0,255)"); grd.addColorStop(0.4,"rgb(0,255,255)"); grd.addColorStop(0.6,"rgb(255,0,255)"); grd.addColorStop(0.8,"rgb(255,255,0)"); grd.addColorStop(1,"rgb(255,255,255)"); //设置填充为线性渐变 ctx.fillStyle=grd; //绘制矩形 ctx.fillRect(20,20,150,100); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body onload="draw('canvas')"> <canvas id="canvas" width="300" height="400"> </canvas> </body> <script> function draw(id) { //获取元素 var canvas = document.getElementById(id); if (canvas == null) { return false; } //获取canvas上下文 var ctx = canvas.getContext('2d'); //设置线性渐变颜色 var g1 = ctx.createRadialGradient(400,50,50,400,50,400); g1.addColorStop(0, 'rgb(255,255,0)'); g1.addColorStop(0.3, 'rgb(255,0,255)'); g1.addColorStop(1, 'rgb(0,255,255)'); //设置填充背景 ctx.fillStyle = g1; //绘制矩形 ctx.fillRect(0, 0, 500, 500); } </script> </html>
十二、复杂渐变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body onload="draw('canvas')"> <canvas id="canvas" width="300" height="400"> </canvas> </body> <script> function draw(id) { //获取元素 var canvas = document.getElementById(id); if (canvas == null) { return false; } //获取canvas上下文 var ctx = canvas.getContext('2d'); //设置线性渐变颜色 var g1 = ctx.createLinearGradient(0, 0, 0, 300); g1.addColorStop(0, 'rgb(255,255,0)'); g1.addColorStop(1, 'rgb(0,255,255)'); //设置填充背景 ctx.fillStyle = g1; //绘制矩形 ctx.fillRect(0, 0, 500, 500); var g2 = ctx.createLinearGradient(0, 0, 300, 0); g2.addColorStop(0, 'rgba(0,0,255,0.5)'); g2.addColorStop(1, 'rgba(255,0,0,0.5)'); //绘制10个圆 for (var i = 0; i <=10; i++) { ctx.beginPath(); ctx.fillStyle = g2; ctx.arc(i * 25, i * 25, i * 10, 0,Math.PI * 2, true); ctx.closePath(); ctx.fill(); } } </script> </html>
