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. hdu 2187 悼念512汶川大地震遇难同胞——老人是真饿了

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2187 题目简问: 解题思路: 已知给出了 总钱数 和 一共的种类 1. 对给出的大米,按照价格进行升序 ...

  2. 一个简单的web服务器

    写在前面 新的一年了,新的开始,打算重新看一遍asp.net本质论这本书,再重新认识一下,查漏补缺,认认真真的过一遍. 一个简单的web服务器 首先需要引入命名空间: System.Net,关于网络编 ...

  3. [Socket网络编程]由于套接字没有连接并且(当使用一个 sendto 调用发送数据报套接字时)没有提供地址，发送或接收数据的请求没有被接受。

    原文地址:http://blog.sina.com.cn/s/blog_70bf579801017ylu.html,记录在此方便查看 解决办法: MSDN的说明: Close 方法可关闭远程主机连接, ...

  4. 优化sql语句

    关于数据库sql语句的优化? 这个链接可以看 涉及数据库的操作基本都是变得很慢了, 所以通常说数据库是程序的瓶颈 测试/优化数据库/sql的方法: 把order排序.where条件等一个一个去除法来做 ...

  5. NBUT1541 Rainwater 题解

    http://cdn.ac.nbutoj.com/Problem/view.xhtml?id=1541 When rain, nocLyt discovered a magical phenomeno ...

  6. 入门必看--JavaScript基础

    JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. ...

  7. [素材资源] Android开发性能优化简介(非常不错的)

    转自(http://www.starming.com/index.php?action=plugin&v=wave&tpl=union&ac=viewgrouppost& ...

  8. Nginx和PHP-FPM的启动/重启脚本 [转发]

    Nginx和PHP-FPM的启动/重启脚本 [转发] (2012-07-27 16:07:52) 标签: it 分类: 学习 转载自:http://blog.sina.com.cn/s/blog_53 ...

  9. 用VMware安装虚拟系统时出现Invalid system disk,Replace the disk and then press any key

    VMware 默认是第一次从光盘启动,第二次从硬盘启动,你刚分区,里面还没有系统,当然报这个错,再次从光盘启动需要设置 VMware 的 BIOS,重新启动虚拟系统,当出现 VMware 的图标时用鼠 ...

  10. 【Hibernate】Hibernate系列2之Session详解

    Session详解 2.1.概述-一级缓存 2.2.操作session缓存方法 2.3.数据库隔离级别 2.4.持久化状态 2.5.状态转换 2.6.存储过程与触发器