canvas教程

HTML5 Canvas的文本笔触颜色

字号+ 作者:H5之家 来源:H5之家 2015-10-06 18:27 我要评论( )

HTML5 Canvas的文本笔触颜色,要设置笔触颜色HTML5Canvas的文本,我们可以使用的strokeStyle画布的背景和strokeText()方法。context.strokeStyle=[value];conte

HTML5 Canvas的文本笔触颜色介绍:HTML5,Canvas的文本笔触颜色,HTML5,Canvas的文本笔触颜色 所属栏目为HTML教程

要设置笔触颜色HTML5 Canvas的文本,我们可以使用的strokeStyle画布的背景和strokeText()方法。

  • context.strokeStyle=[value];
  • context.strokeText("Hello World!", x, y);

  • 先看下个例子:

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>html5_canvas_text_stroke</title>
    <style>
    body {margin: 0px;padding: 0px;}
    #myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; margin-left:100px;}
    </style>
    <script>
       window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
     
        var x = 80;
        var y = 110;
        context.font = "60pt Calibri";
     
        context.lineWidth = 3;
        context.strokeStyle = "blue"; // stroke color
        context.strokeText("Hello World!", x, y);
    };
    </script>
    </head>
    <body>
     <canvas id="myCanvas" width="578" height="200">
     </canvas>
    </body>
    </html>

    免责声明:本文内容及图片等均属网络转载,如侵即删。本文仅代表作者个人观点,与网页资源网无关。其原创性及文中陈述内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,仅作参考,请自行核实相关内容。

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • html5canvas核心技术图形、动画与游戏开发源码

      html5canvas核心技术图形、动画与游戏开发源码

      2017-05-02 17:42

    • 打印html5中Canvas的方法

      打印html5中Canvas的方法

      2017-05-01 15:03

    • HTML5+Canvas调用手机拍照功能实现图片上传(下)

      HTML5+Canvas调用手机拍照功能实现图片上传(下)

      2017-04-30 17:00

    • HTML5新特性详解(三)

      HTML5新特性详解(三)

      2017-04-30 16:03

    网友点评