canvas 基础

最新推荐文章于 2019-10-31 17:14:44 发布

anran_1211

最新推荐文章于 2019-10-31 17:14:44 发布

阅读量255

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/anran_1211/article/details/78904326

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

canvas 是一个二维网格

获取canvas var c = document.getElementById('myCanvas')；

创建2d空间 var ctx = c.getContext('2d')；

设置颜色 ctx.fillStyle = "#000"；

定义矩形的填充方式 ctx.fillRect(x,y,width,height)；

canvas 路径

moveTo(x,y) 定义线的开始坐标

lineTo(x,y) 定义线的结束坐标

完成后用 ctx.stroke()结束

在canvas中绘制圆形 arc(x,y,r,start,stop);

ctx.beginPath();

ctx.arc(60,60,30,0,2*Math.PI); // Math.PI代表180度，画圆的方向是顺时针

ctx.stoke();

用canvas绘制文本（实心/空心）

定义字体 font= “30px Arial”;i

实心文本 fillText("hello",20,60);

空心文本 strokeText("hello",20,90);

canvas 渐变，必须使用两种或者两种以上的颜色

createLinearGradient（x,y,x1,y1） // 创建线条渐变

createLinearGradient（x,y,r,x1,y1,r1） // 创建一个颈项/圆渐变

addColorStop() // 方法指定颜色停止，参数使用坐标来描述0至1；

canvas画图

drawImage(获取图片，x，y);

代码如下：

<!DOCTYPE HTML>
<html>
<body>
    <img src="img\timg (1).jpg" width="280" height="150">
    <canvas id="myCanvas" width="370" height="250" style="border: 1px solid #ccc;"></canvas>
    <script>
        // 画直线 moveTo() lineTo() stroke();
        // var c = document.getElementById('myCanvas');
        // var ctx = c.getContext("2d");
        // ctx.moveTo(10,10);
        // ctx.lineTo(47,78);
        // ctx.stroke();

        // 画圆
        // var c = document.getElementById('myCanvas');
        // var ctx = c.getContext('2d');
        // ctx.beginPath();
        // ctx.arc(60,60,30,0,2*Math.PI);
        // ctx.stroke();

        // 实心或者空心的文字
        // var c = document.getElementById('myCanvas');
        // var ctx = c.getContext('2d');
        // ctx.font = "30px Arial";
        // ctx.strokeText("hello",30,30);  // 空心
        // ctx.fillText("hello",30,60);    // 实心

        // 线性渐变
        // var c = document.getElementById('myCanvas');
        // var ctx = c.getContext('2d');
        // // 创建渐变
        // var grd = ctx.createLinearGradient(0,0,200,0);
        // grd.addColorStop(0,'red');
        // grd.addColorStop(1,'white');
        // // 填充渐变
        // ctx.fillStyle = grd;
        // ctx.fillRect(10,10,150,80);

        // 颈项 圆渐变
        // var c = document.getElementById('myCanvas');
        // var ctx = c.getContext('2d');
        
        // var grd = ctx.createLinearGradient(80,60,5,90,20,50);
        // grd.addColorStop(0,"red");
        // grd.addColorStop(1,"white");

        // ctx.fillStyle = grd;
        // ctx.fillRect(10,10,180,120);

        // canvas 图像
        var c = document.getElementById('myCanvas');
        var ctx = c.getContext('2d');
        var oImg = document.getElementsByTagName('img')[0];
        oImg.onload = function(){
            ctx.drawImage(oImg,10,10);
        }
    </script>
</body>
</html>

anran_1211

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 基础

canvas 是一个二维网格获取canvas var c = document.getElementById('myCanvas')；创建2d空间 var ctx = c.getContext('2d')；设置颜色 ctx.fillStyle = "#000"；定义矩形的填充方式 ctx.fillRect(x,y,width,height)；can
复制链接

扫一扫