html5 canvas画布
2018-07-20 来源：open-open
<!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>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。
下一篇:JS取两个数组相同的元素
最新资讯
热门推荐