zoukankan      html  css  js  c++  java
  • html5-画布

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title></title>
     </head>
     <body>
     <canvas id="mycanvas" width="520px" height="1314px">
     </canvas>
     <script type="text/javascript">
      var myCanvas = document.getElementById("mycanvas");
      var ctx = myCanvas.getContext("2d");
      ctx.fillStyle="red";
      ctx.fillRect(0,0,100,100);
      ctx.beginPath();//起始一条路径,或重置当前路径
      ctx.moveTo(20,20);//把路径移动到画布中的制定点,不创建线条
      ctx.lineTo(200,200);//添加一个新点,然后在画布中创建从该点到指定点的线条
      ctx.lineTo(400,20);
      ctx.closePath();//创建从当前点到起点的路径
      ctx.lineWidth=2.0;
      ctx.strokeStyle="#CC0000";
      ctx.stroke();//绘制已定义的路径
      ctx.strokeRect(10,10,100,200);//strokeRec绘制矩形函数
      ctx.fillRect(10,10,100,200);//绘制填充矩形
      ctx.clearRect(20,20,50,50);//清空矩形内制定像素
      ctx.fillText("Hello Syl!",10,50);//绘制实心文本
      ctx.strokeText("Hello Syl!", 100, 50);//绘制空心文本
      var image=new Image();
      image.src="1.jpg";
      image.onload=function(){
       for (var i=0;i<5;i++){
        ctx.drawImage(image,100+i*80,100+i*80);
       }
       
      };
      
      
     </script>
     </body>
    </html>
  • 相关阅读:
    poj 1466 Girls and Boys
    poj 1486 Sorting Slides
    poj 2112 Optimal Milking
    poj 1274 The Perfect Stall
    SHoj 420 购买装备
    poj 2987 Firing
    SHoj A序列
    FOJ Problem 2271 X
    XidianOJ 1028 数字工程
    XidianOJ 1030 三数和
  • 原文地址:https://www.cnblogs.com/emma-zhu/p/11882207.html
Copyright © 2011-2022 走看看