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. 有关基于模型的设计（MBD）一些概念和理解(zz)

    http://www.matlabsky.com/thread-38774-1-1.html 本文转载于MathWorks中国高级工程师董淑成的帖子内容.为了方便阅读,对原文进行了重新整理编辑. 之前 ...

  2. C++_Eigen函数库用法笔记——Advanced Initialization

    The comma initializer a simple example  join and block initialize  join two row vectors together ini ...

  3. C# 设置开机自动启动(注册表方式)

    .NET技术交流群 199281001 .欢迎加入. using System; using System.Collections.Generic; using System.Linq; using ...

  4. l来自wentao:项目加入缓存（redis）,实时调试时用 -----可视化缓存，flushdb

    下文来自segmentfault,网站:一个交流网站:https://segmentfault.com/ 在做一个项目时如果加入缓存(例如redis),我如何进行实时调试呢? 缓存 高并发 架构 gz ...

  5. 关于thinkphp 开发的网站部署问题

    公司一个网站用thinkphp 开发的,由wamp环境移植到lamp环境 出现错误.提示无法生成缓存文件. 原因是thinkphp 的一些目录需要重新生成,所以将一个新的thinkphp 核心包应用后 ...

  6. Javascript 将图片的绝对路径转换为base64编码

    Javascript将图片的绝对路径转换为base64编码 我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: var i ...

  7. upc.2219: A^X mod P(打表 && 超越快速幂（in some ways)）

    2219: A^X mod P Time Limit: 5 Sec  Memory Limit: 128 MB Submit: 417  Solved: 68 [Submit][Status][Web ...

  8. 在Linux用户空间做内核空间做的事情

    导读 我相信,Linux 最好也是最坏的事情,就是内核空间(kernel space)和用户空间(user space)之间的巨大差别.如果没有这个区别,Linux 可能也不会成为世界上影响力最大的操 ...

  9. 序列化.to_sym

    <%= link_to t('links.list'), showable_paths[@subchannel_item.showable_type.to_sym], target: '_bla ...

  10. linux 搭建hexo博客

    搭建环境: CentOS 6.5 1.安装git的编译包 yum -y install gcc zlib-devel openssl-devel perl cpio expat-devel gette ...