h5 canvas 画图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script type="text/javascript">

        $().ready(function () {

            var $c=$("#cans");

            $c.bind('mousemove', function (event) {

                var x=event.clientX;

                var y=event.clientY;

                $("#res").text("坐标：x轴"+x+"坐标：y轴"+y);

            });

            // 画矩形

            var d=$c.get(0).getContext("2d");  //2d

            d.fillStyle="red";    //颜色

            d.fillRect(0,0,100,100); // 矩形

            d.fillStyle="rgba(0,0,255,0.5)";  //最后一个是程春明度

            d.fillRect(200,0,100,100);

//            画线

            d.moveTo(110,110); //起始位置

            d.lineTo(130,130); //终止位置

            d.lineTo(155,120); // 如果没有再次设置起始位置则从终止位置继续画

            d.stroke(); // 结束图形

//            圆

            d.fillStyle="blue";

            d.beginPath(); // 从新开始画，防止 冲突重叠

            d.arc(100,200,30,0,Math.PI*2,true); // x y 坐标 半径30

            d.closePath(); // 结束画布，防止冲突重叠

            d.fill(); // 结束渲染

//            颜色渐变

            var grd= d.createLinearGradient(250,250,375,250); // 颜色渐变的起始和终止坐标

            grd.addColorStop(0,'red'); // 0 表示起点  0.1 0.2.。。1 表示终点

            grd.addColorStop(0.8,'green');

            grd.addColorStop(1,'blue');

            d.fillStyle=grd;

            d.fillRect(250,250,375,250);  // 设置色块

//            载入图形

            var img=new Image()

            img.src="../img/logo.png"
             //等图像 加载完毕，再绘制图像
            img.onload= function () {
              //d.drawImage(img,200,30);   // 加载图片

              // 背景图片平铺
                var pattern = d.createPattern(img, "repeat");
             //2、将返回值设置给fillStyle属性
                d.fillStyle = pattern;
              //3、填充矩形
                d.fillRect(0, 0, 400, 300);
         }

                //切割图像
                d.beginPath();
                d.arc(150,150,50,0,Math.PI * 2 , true);
                d.closePath();
                d.clip();
 }); </script> </head> <body> <canvas id="cans" width="500" height="500">浏览器不支持canvas</canvas> <div id="res"></div> </body> </html>

h5画图 补充

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>day04 pm 完</title>

    <style>

    </style>

    <script src="js/jquery.min.js"></script>

    <script>

        $().ready(function () {

            var can=$("#canvas").get(0);   //转成 dom 操作

            d=can.getContext("2d");

            d.fillStyle="red";    //填充颜色

            d.strokeStyle='green'; // 线条颜色

            d.strokeRect(50,50,100,100);  //边框矩形

            d.fillRect(60,60,80,80); // 实心矩形

            d.clearRect(70,70,60,60);  //擦除矩形

        // 封闭的三角形

            d.beginPath();        // 添加  beginPath() closePath() 就可以形成封闭图形

            d.moveTo(110,110); //起始位置

            d.lineTo(130,130); //终止位置

            d.lineTo(155,120); // 如果没有再次设置起始位置则从终止位置继续画

            d.closePath();

            d.fillStyle="blue";

            d.stroke(); // 结束图形

            d.fill();

        //  左半圆

            d.fillStyle="green";

            d.beginPath(); // 从新开始画，防止 冲突重叠

            d.arc(100,200,30,Math.PI/2,Math.PI*3/2,false);

            // x y 坐标 半径30 位置 上 PI*3/2 右 0 / 2PI  下 pi/2 左 pi  true false表示顺时针或逆时针

            d.closePath(); // 结束画布，防止冲突重叠

            d.fill(); // 结束渲染

            //任意矩形

            $("#btn").click(function () {

                var x=parseInt(Math.random()*500);

                var y=parseInt(Math.random()*400);

                d.fillRect(x,y,100,100);

            });

            // 缩放

            $("#btnScale").click(function () {

                d.scale(1.2,1.2);  //放大1.2倍 要再画矩形才有效果

//                d.translate(100,100);

//                d.save(); // 保存扩大缩小等的状态

//                d.restore(); //  恢复状态

            });

        });

    </script>

</head>

<body>

    <canvas id="canvas" width="800" height="500" style="border:1px solid green;">

        不支持 canvas

    </canvas>

    <br>

    <button type="button" id="btn">button</button>

    <button type="button" id="btnScale">btnScale</button>

</body>

</html>

html5绘制文字

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="js/jquery.js"></script>

    <script>

        $(function () {

            var canvas = $("#canvas").get(0);

            var d = canvas.getContext("2d");

            d.lineWidth=1;

            d.strokeStyle='green';

            d.font = "bold 24px 微软雅黑";

            d.strokeText("你好,世界!",20,20);   //空心文字轮廓

            d.fillText("你好,世界!",125,125);   // 文字

            //阴影文字

            d.shadowColor="red";  //阴影

            d.shadowOffsetX=5;      // 偏移

            d.shadowOffsetY=5;      //

            d.shadowBlur=5;          // 阴影模糊效果

            d.font = "bold 24px 微软雅黑";

            d.fillText("微软雅黑!",35,50);

      });

    </script>

</head>

<body>

<canvas id="canvas" width="800" height="300"></canvas>

</body>

</html>

html5 线条粗细 张条线冒

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="js/jquery.js"></script>

    <script>

        $(function () {

            var canvas=$("#canvas").get(0);

            var d=canvas.getContext("2d");

            //线条粗细  lineWidth:1

            // 线条线冒： lineCap:butt round square

            d.lineWidth=6;     // 线条粗细

            d.lineCap='round';   //头尾圆角

            //d.lineJoin='round';  // 线条连接处圆角

            d.lineJoin='miter';   //  两条线形成的锐角长度，默认为10

            d.miterLimit=8;

            d.strokeStyle='green';

            d.moveTo(110,110); //起始位置

            d.lineTo(150,150); //终止位置

            d.lineTo(125,100); // 如果没有再次设置起始位置则从终止位置继续画

            d.stroke(); // 结束图形

        });

    </script>

</head>

<body>

<canvas id="canvas" ></canvas>

</body>

</html>

h5 canvas 画图的更多相关文章

  1. ## H5 canvas画图白板踩坑

    最近接手了一个小型的H5,最主要的功能大概就是拍照上传和canvas画板了. 主要是记录一下自己菜到像傻子一样的技术. 1.canvas画板隔空打牛!画布越往上部分错位距离越小,越往下距离越大. 2. ...

  2. HTML5 Canvas 画图入门

    HTML5 Canvas 画图入门 HTML5 Canvas 画图入门,仅供学习參考 <!DOCTYPE html> <html> <head> <meta ...

  3. html5之canvas画图基础

    HTML5+CSS3的好处是,你可以编写一个页面分别用于不同的平台,只需要设置不同的css样式就可以了,现在基本主流浏览器都支持全新的HTML5和CSS3,因为它的跨平台开发.因为是原生代码所以它的页 ...

  4. Canvas画图在360浏览器中跑偏的问题

    问题描述,canvas画图的js代码中编写的是画正方形的代码,结果在360浏览器上变成了长方形,不知道怎么回事,请问各位大神是否遇到过此类问题? <!DOCTYPE html> <h ...

  5. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  6. h5 canvas 小球移动

    h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. html5 Canvas画图3：1px线条模糊问题

    点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...

  8. 使用 canvas 画图时图像文字模糊的解决办法

    最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率创建不同尺寸的画布.以下是创建高分辨率画布的代码: /** * 创建高分辨率画布 * @param w 画布宽 * ...

  9. H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入

    一: 1.鼠标监视坐标值 <!DOCTYPE html> <head> <meta charset=UTF-8> <title>canvas的演示< ...

随机推荐

  1. TCP/IP协议栈概述

    TCP/IP协议栈概述 这篇文章虽然只是很粗浅的介绍了ISO/OSI 网络模型,但确实把握住了关键点,某种意义上,简单回顾一下就可以加深对TCP/IP协议栈的理解. 原作者:阮一峰 链接: http: ...

  2. mysql is marked as crashed and should be repaired错误

    1.mysql数据存放路径默认为/var/lib/mysql/目录 2.用myisamchk命令修复数据表,如: myisamchk -c -r talbe.MYI

  3. phpcms 调取全站文章

    路径:phpcms/module/content/classes/content_tag.class.php 添加如下方法 /** * 列表页标签:主要返回的是主表中数据与附表中数据 * @param ...

  4. （转）也谈基于NodeJS的全栈式开发（基于NodeJS的前后端分离）

    原文链接:http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/ 随着不同终端(pad/mobile/pc)的兴起 ...

  5. Matlab图像处理入门

    1． Matlab基础 1.1     数据格式 Matlab默认的数据格式为双精度浮点数的矩阵或数组,同时支持其它数据类型.Matlab将单变量看作1´1的数组.Matlab支持的数据类型如下: 索 ...

  6. Mate7微信指纹支付来了 比Touch ID整合微信早一点

    之前我们聊过微信将推指纹支付 "指付通"会与Touch ID整合吗这个话题,现在有国内厂商率先支持微信指纹支付,体验一下美国用户使用Apple Pay搭配Touch ID来实现便捷 ...

  7. （9）UI（容器）

    1.基础容器   基础容器可以设置子容器布局.是否裁切子元素.填充颜色.背景图片资源等属性.   使用场景.   在官方示例中,大量使用了基础容器作布局管理,如下面的主界面中,用户名称,钻石和金币就使 ...

  8. puppet之自定义fact(转载)

    1.使用环境变量'FACTERLIB'创建fact 1.1.在自定义目录里面定义一个fact,列出当前系统登录的用户数 [root@agent1 ~]# vim /var/lib/puppet/kis ...

  9. Tornaod框架

    Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过为了能有效 ...

  10. PE刷题记录

    PE刷题记录 PE60 / 20%dif 这道题比较坑爹. 所有可以相连的素数可以构成一张图,建出这张图,在其中找它的大小为5的团.注意上界的估算,大概在1W以内.1W内有1229个素数,处理出这些素 ...