一个canvas中strokeStyle的疑问

最新推荐文章于 2023-03-20 14:33:38 发布

huahua1208

最新推荐文章于 2023-03-20 14:33:38 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/huahua1208/article/details/50628522

版权

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Canvas</title>
 </head>
 <style type="text/css">
    body{margin:20px auto; padding:0; width:800px; }
    canvas{border:dashed 2px #CCC}
 </style>
 <script type="text/javascript">
    function pageLoad(){
        var can = document.getElementById('can');
        var cans = can.getContext('2d');
        cans.arc(400,300,200,0,Math.PI,1);
        cans.strokeStyle = 'red';
        cans.lineWidth = 10;
        cans.stroke();
    }
 </script>
<body οnlοad="pageLoad();">
    <canvas id="can" width="800px" height="600px"></canvas>
</body>
</html>

这个效果是圆弧是红色，但是如果strokeStyle在后面，就不会显示红色。为什么？

        cans.lineWidth = 10;
        cans.stroke();

        <pre name="code" class="html">        cans.strokeStyle = 'red';<pre name="code" class="html">

canvas中的常用命令

canvas画布设置width和height，里面的xy是相对画布的左上角开始0,0.

lineWidth=3,制定线的粗细

strokeStyle，指定边框的颜色

stroke（）

实心的fillStyle的颜色设置

fill();

canvas设置的css样式，建议就是行间设置。

js中可以用canvas.Width和canvas.Height设置画布的宽度和高度。

huahua1208

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个canvas中strokeStyle的疑问

Canvas body{margin:20px auto; padding:0; width:800px; } canvas{border:dashed 2px #CCC} function pageLoad(){ var can = document.getElementById('can'); var cans = can
复制链接

扫一扫