<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="80px" height="80px" style="border: 1px solid #000000"></canvas>
<canvas id="myCanvas2"></canvas>
<canvas id="myCanvas3"></canvas>
<canvas id="myCanvas4"></canvas>
<canvas id="myCanvas5"></canvas>
<canvas id="myCanvas6"></canvas>
<script>
<!--原刑渐变-->
var h = document.getElementById("myCanvas6");
var ctx6 = h.getContext("2d");
var grd2 = ctx6.createRadialGradient(50,90,15,90,60,100);
grd2.addColorStop(0,"red");
grd2.addColorStop(1,"white");
ctx6.fillStyle=grd2;
ctx6.fillRect(10,10,150,80);
<!--长方行颜色渐变-->
var g=document.getElementById("myCanvas5");
var ctx5 = g.getContext("2d");
var grad = ctx5.createLinearGradient(0,0,200,0);
grad.addColorStop(1,"red");
grad.addColorStop(0,"white");
ctx5.fillStyle=grad;
ctx5.fillRect(20,20,150,150);
<!--空心文字-->
var f = document.getElementById("myCanvas4");
var ctx4 = f.getContext("2d");
ctx4.font="30px Arial";
ctx4.strokeText("Hello World",10,50);
<!--实心文字-->
var e = document.getElementById("myCanvas3")
<!--获得上下文，并定义文字属性-->
var ctx3= e.getContext("2d");
ctx3.font="30px Arial";
ctx3.textBaseline="hanging";
ctx3.textAlign="ltr";
ctx3.fillText("Hello World",10,50);
<!--画圆-->
var d = document.getElementById("myCanvas2");
var ctx2 = d.getContext("2d");
ctx2.beginPath();
ctx2.arc(95,50,40,0,2*Math.PI);
ctx2.stroke();
<!--画布设置颜色-->
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,35,25);
ctx.moveTo(0,0);
ctx.lineTo(35,25);
ctx.stroke();
</script>
</body>
</html>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/10078.html