html5-Canvas 画图标签、画线、圆、渐变色

最新推荐文章于 2024-09-27 16:51:59 发布

empty007

最新推荐文章于 2024-09-27 16:51:59 发布

阅读量195

点赞数

分类专栏： web前端文章标签： html5 canvas

本文链接：https://blog.csdn.net/empty007/article/details/84382221

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

转载自【http://www.656463.com/article/332】

Canvas标签定义，并获得坐标；画矩形，定义颜色，透明度；画直线，定义连接，节点；画圆，定义弧度，节点；画渐变色，定义节点渐变效果；读入一张图片
示例代码


<!DOCTYPE html>
<head>
<meta charset=gbk>
<title>PHP100 HTML5视频教程-canvas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"
        onmousemove="mousexy(event)"></canvas>
<div id="ds"></div>
<script type="text/javascript">
    var c=document.getElementById("mycanvas");
    var p100=c.getContext("2d");
    p100.fillStyle="#FF0000"; //定义颜色
    p100.fillRect(0,0,300,300); //定义矩形的大小
    p100.fillStyle="rgba(0,0,255,0.5)"; //定义颜色，支持透明
    p100.fillRect(200,200,500,500); //定义矩形大小

    //========线======
    p100.moveTo(10,10); //起始位置
    p100.lineTo(150,50); //终止位置
    p100.lineTo(10,50); //如果没有再次设置起始位置将从结束位置开始画
    p100.stroke(); //结束图形

    //=======圆=======
    p100.fillStyle="blue"; //定义演示
    p100.beginPath(); //从新开始画，防止冲突重叠
    //x坐标，y坐标，直径，Math.PI是圆周率
    p100.arc(200,200,30,0,Math.PI*2,true);
    p100.closePath(); //结束画布，防止冲突重叠
    p100.fill(); //结束渲染

    //======颜色渐变====
    //颜色渐变的起始坐标和终点坐标
    var grd=p100.createLinearGradient(100,100,175,50);
    //0表示起点..0.1 0.2 ...1表示终点，配置颜色
    grd.addColorStop(0,"yellow");
    grd.addColorStop(1,"blue");

    p100.fillStyle=grd; //生成的颜色块赋值给样式
    p100.fillRect(100,100,175,50); //设置色块

    //=======图形载入=====
    var img=new Image()
    img.src="logo.png"
    p100.drawImage(img,220,30);

    //监视鼠标
    function mousexy(n){
    x=n.clientX;
    y=n.clientY;
    $("#ds").html("坐标: x轴"+x+" y轴"+y);
    }
</script>
</body>
</html>