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. sencha touch pull-refresh-panel 面板下拉刷新

    转自:http://www.cnblogs.com/mlzs/archive/2013/06/04/3117518.html 此效果手机未测试,目测没问题,我是搬运工... 演示地址:http://s ...

  2. json2.js的用途（拯救IE）

    json2.js提供了json的序列化(JSON.stringify)和反序列化方法(JSON.parse):可以将一个Object或Array转换成json字符串,也可以将一个json字符串转换成一 ...

  3. sockaddr & sockaddr_in struct

    struct sockaddr { unsigned short sa_family; /* address family, AF_xxx */ ]; /* 14 bytes of protocol ...

  4. Jquery 鼠标事件解析

    1 mouseover与mousemove的区别: mouseover是当鼠标移动到对象时产生,只产生一次,这时如果继续在对象上移动,不会再产生mouseover事件,而是mousemove事件,mo ...

  5. C# 获取文件MD5校验码

    using System; using System.IO; using System.Security.Cryptography; using System.Text; public class M ...

  6. HDU4891_The Great Pan_字符串水题

    2014多校第五题,当时题面上的10^5写成105,我们大家都wa了几发,改正后我和一血就差几秒…不能忍 题目:http://acm.hdu.edu.cn/showproblem.php?pid=48 ...

  7. 移动端富文本编辑器artEditor

    摘要: 由于手机上打字比较慢,并不适合长篇大论的文章,所以移动端的富文本编辑器很少.artEditor是一款基于jQuery的移动端富文本编辑器,支持插入图片,后续完善其他功能. 插件地址:https ...

  8. 微信内测"微视频" 朋友圈可以发6-8秒短视频

    我们在发朋友圈时现在只能发文字和图片,图片又分为从相册中选择和直接拍摄照片,以后朋友圈拍6-8秒短视频可能是一种新的内容形式,作为文字和图片外的补充.因为微信开始内测新功能“微视频”,其产品理念与微视 ...

  9. 第三方br查询工具害人不浅

    第三方br查询工具害人不浅,查询的时候会大批量调用百度的数据库,为什么说是大批量查询呢? 首先是自己查询,心急的站长恨不得下一次刷新br时数值会有所提高,不是那么急的也会一天查一次或几天一次,记录网站 ...

  10. [BZOJ2959]长跑——新技能：LCT+缩圈

    [BZOJ2959]长跑 试题描述 某校开展了同学们喜闻乐见的阳光长跑活动.为了能“为祖国健康工作五十年”,同学们纷纷离开寝室,离开教室,离开实验室,到操场参加3000米长跑运动.一时间操场上熙熙攘攘 ...