三角形路径绘制
<!DOCTYPE html>
<html>
<head><meta charset='utf-8'></head>
<body>
<!-- 1.配置标签 canvas -->
<canvas id='a_canvas' width='300' height='300'></canvas>
<script type="text/javascript">
// 2.获取canvas duix
var canvas = document.getElementById('a_canvas');
// 3.由canvas获取 绘图的上下文
var ctx =canvas.getContext('2d');
// canvas.onmousedown = function(event){
var x = 100;
var y = 150;
var r = Math.random()*200 + 5;
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x,y + r);
ctx.lineTo(x+r , y+r);
ctx.lineTo(x,y);
// 绘制路径
ctx.strokeStyle = 'red';
ctx.stroke();
// };
</script>
</body>
</html>
圆
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<!-- 1.配置标签 canvas -->
<canvas id='a_canvas' width='400' height='400'></canvas>
<script type="text/javascript">
(function (){
window.addEventListener("load", function(){
// 2.获取canvas duix
var canvas = document.getElementById('a_canvas');
// 3.由canvas获取 绘图的上下文
var ctx =canvas.getContext('2d');
ctx.beginPath();
// context.arc(x,y,半径，开始角度，结束角度，是否逆时针旋转)
ctx.arc(150,45,35,0,Math.PI*2, false);
ctx.fillStyle = 'rgba(192,80,77,0.7)';
ctx.fill();
ctx.strokeStyle = 'rgba(192,80,77,1)';
ctx.stroke();
},false);
})();
</script>
</body>
</html>
圆弧
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<!-- 1.配置标签 canvas -->
<canvas id='a_canvas' width='400' height='400'></canvas>
<script type="text/javascript">
(function (){
window.addEventListener("load", function(){
// 2.获取canvas duix
var canvas = document.getElementById('a_canvas');
// 3.由canvas获取 绘图的上下文
var ctx =canvas.getContext('2d');
ctx.beginPath();
// context.arcTo(x1,y1,x2,y2,半径)
ctx.beginPath();
ctx.moveTo(20,20);
ctx.arcTo(290,150,20,280,20);
ctx.lineTo(20,280);
ctx.strokeStyle = "#0000ff";
ctx.lineWidth =3;
ctx.stroke();
},false);
})();
</script>
</body>
</html>
二元三元抛物线
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<!-- 1.配置标签 canvas -->
<canvas id='a_canvas' width='400' height='400'></canvas>
<script type="text/javascript">
(function (){
window.addEventListener("load", function(){
// 2.获取canvas duix
var canvas = document.getElementById('a_canvas');
// 3.由canvas获取 绘图的上下文
var ctx =canvas.getContext('2d');
// context.quadraticCurveTo(cpx,cpy,x,y) 二元抛物线
// context.bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y) 三元抛物线
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(100,280,180,280,280,20);
ctx.strokeStyle = "#0000ff";
ctx.lineWidth =3;
ctx.stroke();
},false);
})();
</script>
</body>
</html>
渐变
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<!-- 1.配置标签 canvas -->
<canvas id='a_canvas' width='400' height='400'></canvas>
<script type="text/javascript">
(function (){
window.addEventListener("load", function(){
// 2.获取canvas duix
var canvas = document.getElementById('a_canvas');
// 3.由canvas获取 绘图的上下文
var ctx =canvas.getContext('2d');
// CanvasGradient = context.createLinearGradient(x1,y1,x2,y2);
// CanvasGradient.addColorStop(颜色开始相对位置，颜色)
ctx.beginPath();
ctx.moveTo(20,20);
var g = ctx.createLinearGradient(0,0,300,0);
g.addColorStop(0,'rgb(255,0,0)');
g.addColorStop(0.3,'rgb(255,255,0)');
g.addColorStop(1,'rgb(255,0,0)');
ctx.fillStyle = g;
ctx.fillRect(20,20,260,260);
var r = ctx.createRadialGradient(150,150,50,150,150,100)
r.addColorStop(0.3,'red');
r.addColorStop(0.7,'yellow');
r.addColorStop(1,'blue');
ctx.fillStyle = r;
ctx.fillRect(20,20,260,260);
},false);
})();
</script>
</body>
</html>
二元三元抛物线
