zoukankan      html  css  js  c++  java
  • Html5 画图


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    </head>
    <body>
    <canvas id="can1" width="500px" height="400px" style="border:solid 1px red">
    </canvas>
    <script type="text/javascript">
    //1.得到画布
    var canvas1 = document.getElementById_x("can1");
    //2.得到画笔
    var cxt = canvas1.getContext("2d");
    //3.画直线
    //moveTo函数就是设置点的位置
    cxt.moveTo(20, 20);
    //设置第二个点的位置
    cxt.lineTo(20, 90);
    //画出直线
    cxt.stroke();


    //画出一个填充三角形
    //开始新的路径
    cxt.beginPath();
    cxt.moveTo(40, 20);
    cxt.lineTo(40, 90);
    cxt.lineTo(80, 90);
    //闭合路径,把最后这个点和第一个点moveTo()闭合
    cxt.closePath();
    //填充矩形
    //cxt.fill();
    cxt.stroke();
    //空心矩形
    cxt.strokeRect(100, 20, 70, 70);
    //填充矩形
    //如果希望改变填充的颜色,刚修改画笔的fillStyle
    cxt.fillStyle = "#00FF00";
    cxt.fillRect(190,20,50,50);


    //画出圆形 car
    //六个参数:arc(x,y,radius,startAngle,endAngle,counterclockwise)
    cxt.beginPath();
    cxt.arc(270, 40, 20, 0, 360, true);//(x,y,r,开始角度,结束角度,是否顺时针)
    cxt.closePath();
    //填充空心的圆形
    cxt.stroke();

    //画笔换色
    cxt.fillStyle = "FF0000";
    cxt.beginPath();
    cxt.arc(320, 40, 20, 0, 360, true); //(x,y,r,开始角度,结束角度,是否顺时针)
    cxt.closePath();
    //填充实心的圆形
    cxt.fill();

    //画图片
    //1.创建image对象
    var img1 = new Image();
    //2.指定是哪个图片
    img1.src = "萨摩耶.jpg";
    //注意要加这么一个方法,先加载完成后再画图
    img1.onload = function () {
    cxt.drawImage(img1, 20, 100, 200, 150);
    }

    //在画布上写字
    var text = "Hello,亲爱哒!";
    //设置字体的大小
    cxt.fillStyle = "#0000FF";
    cxt.font = "30px 华文彩云";
    cxt.fillText(text,230,200);
    </script>
    </body>
    </html>

    感谢来访,共同学习!
  • 相关阅读:
    CentOS7下部署Django
    ORM动态创建表
    JQuery制作加载进度条
    文件上传、下载
    Django执行事务操作
    python常用代码
    深入理解Java虚拟机-垃圾收集器
    ILRuntime作者林若峰分享:次世代手游渲染怎么做
    Android:手把手教你构建 全面的WebView 缓存机制 & 资源加载方案
    unity3d 热更篇--ILRuntime原理
  • 原文地址:https://www.cnblogs.com/dingxiaowei/p/3058821.html
Copyright © 2011-2022 走看看