canvas标签的使用

最新推荐文章于 2024-07-18 11:48:33 发布

chuaie3795

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量65

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3628277/blog/1490194

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas test</title>
</head>
<body>
<!--矩形填充,fill指填充当前绘图（路径）-->
<canvas id="myCanvas1">your browser does not support the canvas tag </canvas>

<script type="text/javascript">

    var canvas=document.getElementById('myCanvas1');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#FF0000';
    ctx.shadowBlur=20;
    ctx.shadowColor="gray";
    ctx.fillRect(20,20,80,100);

</script>

<!--矩形描边,stroke指绘制已定义的路径-->
<canvas id="myCanvas0">your browser does not support the canvas tag </canvas>

<script type="text/javascript">
    var canvas=document.getElementById('myCanvas0');
    var ctx=canvas.getContext('2d');
    ctx.strokeRect(20,20,80,100);

</script>

<!--圆-->
<canvas id="arc" width="200px" height="200px" style="border:1px solid gray"></canvas>
<script>
    var arc=document.getElementById("arc");
    ctx=arc.getContext("2d");
    ctx.strokeStyle="red";
    ctx.beginPath();
    ctx.arc(100,100,50,0,2*Math.PI);
    ctx.arc(100,100,70,0,2*Math.PI);
    ctx.stroke();
</script>

<!--绘制线条-->
<canvas id="line" width="200px" height="200px" style="border:1px solid gray"></canvas>
<script>
    var line=document.getElementById("line");
    ctx=line.getContext("2d");
    ctx.fillStyle="red";
    ctx.moveTo(0,0);
    ctx.lineTo(100,100);
    ctx.lineTo(200,0);
    ctx.lineTo(200,150);
    ctx.lineTo(0,150);
    ctx.lineTo(0,0);
    ctx.fill();

</script>

<!--文本-->
<canvas id="txt" width="200px" height="200px" style="border:1px solid red">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var txt=document.getElementById("txt");
    var text=txt.getContext("2d");
    text.font="60px 微软雅黑";
    text.fillText("练习",40,110);

</script>

<!--文本空心-->
<canvas id="txt1" width="200px" height="200px" style="border:1px solid red">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
    var txt=document.getElementById("txt1");
    var text=txt.getContext("2d");
    text.strokeStyle="red"
    text.font="60px 微软雅黑";
    text.strokeText("练习",40,110);

</script>

<!--渐变-->
<canvas id="gradient" width="200px" height="200px" style="border:1px solid red"></canvas>
<script>
    var c=document.getElementById("gradient");
    var text=c.getContext("2d");

    <!--线性渐变-->
    var gra=text.createLinearGradient(0,0,0,200);
    gra.addColorStop(0,'red');
    gra.addColorStop(1,'#000');
    text.fillStyle=gra;
    text.fillRect(0,0,200,200);
</script>

<canvas id="gradient2" width="200px" height="200px" style="border:1px solid red"></canvas>
<script>
    var c=document.getElementById("gradient2");
    var text=c.getContext("2d");

    <!--径向渐变-->
    var lin=text.createRadialGradient(100,100,30,100,100,100);
    lin.addColorStop(0,'#fff');
    lin.addColorStop(1,'#000');
    text.fillStyle=lin;
    text.fillRect(0,0,200,200);
</script>
</body>
</html>