h5 canvas 画图

Posted gyz418

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5 canvas 画图相关的知识,希望对你有一定的参考价值。

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);  // 设置色块
//            载入图形  chrome 不支持
            var img=new Image()
            img.src="../img/logo.png"
            d.drawImage(img,200,30);



        });
    </script>
</head>
<body>
<canvas id="cans" width="500" height="500">浏览器不支持canvas</canvas>
<div id="res"></div>
</body>
</html>

 

以上是关于h5 canvas 画图的主要内容,如果未能解决你的问题,请参考以下文章

## H5 canvas画图白板踩坑

如何在canvas 画图加文字

怎样用h5canvas鼠标绘制图形

h5 canvas 与 ios11兼容

一个自定义View中canvas画图的问题

canvas 2D绘图