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. 点击cell弹出一个日期选择器

    - (void)setUpGroup2 { ILGroupItem *group = [[ILGroupItem alloc] init]; // 结束时间 ILSettingItem *endTim ...

  2. 锋利的jQuery-6--序列化函数serialize()和serializeArray()在表单提交中的作用

    在通过jQuery ajax提交表单的时候,通常用下边的方法获取表单内容. var form = 'add-account-form'; //表单id $('#' + form).submit(fun ...

  3. BurpSuite之HTTP brute暴力破解

    常规的对username/passwprd进行payload测试,我想大家应该没有什么问题,但对于Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=这样的问题, ...

  4. phpcms 网站迁移服务器

    相信很多人不知道怎么去把PHPCMS V9进行搬家 在本地测试好的phpcms v9网站需要搬到服务器上,可以用以下方法: 1.上传所有的程序文件(如果主机支持压缩包在线解压,那么就打成zip的包,f ...

  5. iOS-使用Xcode拉伸图片

    如果要制作一个类似于QQ消息气泡的图片,该如何制作呢?android中可以使用.9图片指定图片中的某一部分拉伸,那iOS中类似的功能要如何实现呢,Xcode提供了类似的功能.具体步骤如下: 1.选择需 ...

  6. PHP5.3中关于VC9和VC6以及Thread Safe和Non Thread Safe版本选择的问题

    转自:http://www.htmer.com/article/716.htm 最近在PHP官网上看到又有新版的PHP下载了,于是上去找找For Windows的版本,可是一看确傻眼了,一共给了四个版 ...

  7. lamp环境centos6.4

    http://www.centos.bz/2011/09/centos-compile-lamp-apache-mysql-php/comment-page-1/#comments 编译安装: 首先卸 ...

  8. DOM: 如何获取元素下的第一个子元素

    Element.firstChild ?,是的,这是第一种方法,当然,通常来说支持 W3C 规范的浏览器,如 Firefox 等取到的应该是 TEXT_NODE.很早之前,或者说现在最流行的方法可能是 ...

  9. javascript 对象（DOM）document window history

    Javascript对象 目录: window对象 document对象 history对象 navigator对象 window对象 所有浏览器都支持window对象,它表示浏览器窗口. 所有jav ...

  10. 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 ...