zoukankan      html  css  js  c++  java
  • Canvas绘制路径【每日一段代码8】

    <DOCTYPE HTML>
    <html>
    <head>
    <title>笑脸</title>
    <script type="text/javascript">
    function drawShape(){
    var c = document.getElementById("myCanvas");
    if (c.getContext){
    var cxt = c.getContext("2d");
    cxt.strokeStyle="#FF0000";
    cxt.beginPath();
    cxt.arc(75,75,50,0,Math.PI*2,true);
    cxt.moveTo(110,75);
    cxt.arc(75,75,35,0,Math.PI,false);
    cxt.moveTo(65,65);
    cxt.arc(60,65,5,0,Math.PI*2,true);
    cxt.moveTo(95,65)
    cxt.arc(90,65,5,0,Math.PI*2,true);
    cxt.stroke();
    }
    else{
    alert("您的浏览器不支持。");
    }
    }
    </script>
    </head>

    <body onLoad="drawShape()">
    <canvas id="myCanvas" height="150" width="150" style="border:#0000FF 2px
    solid;"></canvas>
    </body>
    </html>

    显示图如下:

    【实例演示Canvas绘制路径,绘制路径和绘制矩形是不同的。首先要使用函数beginPath()创建一个路径,第二使用绘制函数绘制,第三闭合路径,最后调用stroke()或fill()方法,实际完成绘制。实例当中主要用到moveTo()函数,此方法是将绘制起点从某个点移动到另一个点,绘制不连续的路径经常用到。】

  • 相关阅读:
    提交作业至服务器跑
    pytorch基础教程2
    pytorch基础教程1
    pytorch安装
    python scipy计算机数值库
    python机器学习包
    python list和numpy互换
    webpack常用loader和plugin及打包速度优化
    vscode eslint配置vue遇到的问题
    ios真机中Text组件出现多余边框
  • 原文地址:https://www.cnblogs.com/naokr/p/2334448.html
Copyright © 2011-2022 走看看