圣月醒剑吧 关注:200贴子:13,953

回复:【技术】个人技术贴

只看楼主收藏回复

cxt.stroke()的位置看看效果便知
<canvas id="myCanvas" width="578" height="300"></canvas>
<script>
var hd=document.getElementById("myCanvas");
var cxt=hd.getContext("2d");
cxt.beginPath();
cxt.arc(60,60,45,0,Math.PI,true);
cxt.closePath();
cxt.stroke();
</script>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script>
var hd=document.getElementById("myCanvas");
var cxt=hd.getContext("2d");
cxt.beginPath();
cxt.arc(60,60,45,0,Math.PI,true);
cxt.stroke();
cxt.closePath();
</script>



111楼2012-08-21 14:01
回复
    html5
    第五课绘制文字
    <canvas id="myCanvas" width="578" height="300"></canvas>
    <script>
    var hd=document.getElementById("myCanvas");
    var cxt=hd.getContext("2d");
    cxt.font="80pt Calibri";
    cxt.fillStyle="#ff0ef3";
    cxt.textAlign="center";
    cxt.textBaseline="middle";
    cxt.fillText("你好",45,67);
    </script>


    112楼2012-08-21 14:21
    回复
      2026-05-25 06:32:25
      广告
      不感兴趣
      开通SVIP免广告
      html5的一些说明
      beginPath 开始一个新路径
      moveTo 移动路径的绘图起点
      lineTo 从moveTo定义的点开始绘制连续的路径,或者从上一次的lineTo的终点开始绘制。
      closePath 连接最后的点和最初的点并关闭路径绘制
      fill 用颜色填充路径
      stroke 描变路径


      113楼2012-08-22 11:41
      回复
        html5的一些说明
        beginPath 开始一个新路径
        moveTo 移动路径的绘图起点
        lineTo 从moveTo定义的点开始绘制连续的路径,或者从上一次的lineTo的终点开始绘制。
        closePath 连接最后的点和最初的点并关闭路径绘制
        fill 用颜色填充路径
        stroke 描变路径


        114楼2012-08-22 11:43
        回复
          颜色的两种写法:
          c.strokeStyle = "rgb(255, 0, 0)";
          c.strokeStyle = "#FF0000";


          115楼2012-08-22 11:44
          回复
            清除画布:cxt.clearRect(x,y,w,h);


            116楼2012-08-22 11:47
            收起回复

              1:绘制渲染对象,c.getContext("2d"),获取2d绘图对象,无论我们调用多少次获取的对象都将是相同的对象。
              2:绘制方法:
              clecrRect(left,top,width,height)清除制定矩形区域,
              fillRect(left,top,width,height)绘制矩形,并以fillStyle填充。
              fillText(text,x,y)绘制文字;
              strokeRect(left,top,width,height)绘制矩形,以strokeStyle绘制边界。
              beginPath():开启路径的绘制,重置path为初始状态;
              closePath():绘制路径path结束,它会绘制一个闭合的区间,添加一条起始位置到当前坐标的闭合曲线;
              moveTo(x,y):设置绘图其实坐标。
              lineTo(x,y);绘制从当前其实位置到x,y直线。
              fill(),stroke(),clip():在完成绘制的最后的填充和边界轮廓,剪辑区域。
              arc():绘制弧,圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小;
              rect():矩形路径;
              drawImage(Imag img):绘制图片;
              quadraticCurveTo():二次样条曲线路径,参数两个控制点;
              bezierCurveTo():贝塞尔曲线,参数三个控制点;
              createImageData,getImageData,putImageData:为Canvas中像素数据。ImageData为记录width、height、和数据 data,其中data为我们色素的记录为
              argb,所以数组大小长度为width*height*4,顺序分别为rgba。getImageData为获取矩形区域像素,而putImageData则为设置矩形区域像素;
              … and so on!
              3:坐标变换:
              translate(x,y):平移变换,原点移动到坐标(x,y);
              rotate(a):旋转变换,旋转a度角;
              scale(x,y):伸缩变换;
              save(),restore():提供和一个堆栈,保存和恢复绘图状态,save将当前绘图状态压入堆栈,restore出栈,恢复绘图状态;


              117楼2012-08-22 13:02
              回复
                改变链接的属性
                <script>
                function ccc()
                {
                document.getElementById("lj").innerHTML="新浪";
                document.getElementById("lj").href="http://www.sina.com";
                document.getElementById("lj").target="_blank";
                }
                <a id="lj" target="_self" href="http://www.baidu.com">百度</a>
                </script>


                118楼2012-08-22 13:56
                回复
                  2026-05-25 06:26:25
                  广告
                  不感兴趣
                  开通SVIP免广告
                  获取焦点,失去焦点
                  <script>
                  function getfocus()
                  {
                  document.getElementById("kwy").focus();
                  }
                  function losefocus()
                  {
                  document.getElementById("kwy").blur();
                  }
                  </script>
                  <input value="改变" type="text" id="kwy" />
                  <input type="button" value="获得焦点" onClick="getfocus()"/>
                  <input onClick="losefocus()" type="button" value="失去焦点" />
                  


                  119楼2012-08-22 14:04
                  回复
                    获得当前文档的标题
                    <script>
                    document.write(document.title);
                    </script>


                    120楼2012-08-22 14:12
                    回复
                      获得当前文档的地址
                      <script type="text/javascript">
                      document.write(document.URL);
                      </script>


                      121楼2012-08-22 14:13
                      回复
                        获得当前文档的地址
                        <script type="text/javascript">
                        document.write(document.URL);
                        </script>


                        122楼2012-08-22 14:22
                        回复
                          document.getElementsByName()的用法
                          <script type="text/javascript">
                          function accesskey()
                          {
                          document.getElementById("tpl").value=document.getElementsByName("tp").item(0).value;//获取第一个tp的值
                          document.getElementById("tpt").value=document.getElementsByName("tp").length;
                          //取得tp的数量
                          }
                          </script>
                          <input type="text" name="tp" />
                          <input type="text" name="tp" />
                          <input type="text" name="tp" />
                          <input type="text" id="tpl" />
                          <input type="text" id="tpt" />
                          <input type="button" value="确定" onClick="accesskey()" />


                          123楼2012-08-22 14:27
                          回复
                            得到文档中锚点的数量
                            <a name="first">第一个锚</a><br />
                            <a name="second">第二个锚</a><br />
                            <a name="third">第三个锚</a><br /><br />
                            文档中锚的数目:
                            <script type="text/javascript">
                            document.write(document.anchors.length);
                            </script>


                            124楼2012-08-22 14:42
                            回复
                              2026-05-25 06:20:25
                              广告
                              不感兴趣
                              开通SVIP免广告
                              返回文档中第一个锚的 innerHTML
                              <a name="first">第一个锚</a><br />
                              <a name="second">第二个锚</a><br />
                              <a name="third">第三个锚</a><br /><br />
                              本文档中第一个锚的 InnerHTML 是:
                              <script type="text/javascript">
                              document.write(document.anchors[0].innerHTML)
                              </script>


                              125楼2012-08-22 14:43
                              回复