canvas相关

先测试<canvas>是否被支持

　　<canvas>

　　　　我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas

　　</canvas>

再设置画布长宽，背景色。

下一步获取画布

    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas_1");

    // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
    var ctx = canvas_1.getContext("2d");//注意这里不能写2D

    // 打印一下，查看是否能够显示具体环境
    console.log(ctx);

关于画布的坐标系，横轴向右是正，纵轴向下是正

绘制图形

 

首先先看看几个方法

　　beginPath 是表示开始定义路径，不会产生特殊的效果。

　　closePath 除了表示关闭当前定义的路径之外，还会有一个特殊的作用，就是可以将当前绘制图形的最后一个点和我们绘制图形开始的点进行连接。

　　moveTo(float x,float y)，把 canvas 的当前路径的结束点移动到 x, y 对应的点。

　　lineTo(float x,float y)，把 canvas 的当前路径从当前结束点连接到 x , y 对应的点。

 

　　 .fillStyle = "green"，设置填充视图样式，支持

    1. 　　符合颜色格式的字符串值，表示使用纯色填充
    2. 　　CanvasGradient，表明使用渐变填充
    3. 　　CanvasPattern，表明使用位图填充

　　.strokeStyle()　　路径的填充风格，也支持上条的123点

　　fill()，填充当前视图

　　stroke()填充 canvas 当前路径绘制边框

　　lineWidth() 笔的宽度

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div>
 9         <canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
10             当前浏览器不支持 canvas
11         </canvas>
12     </div>
13 </body>
14 <script type="text/javascript">
15 
16     // 获取 canvas 元素对应的 DOM 对象
17     var canvas_1 = document.getElementById("canvas_1");
18 
19     // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
20     var ctx = canvas_1.getContext("2d");
21 
22     // 打印一下，查看是否能够显示具体环境
23     console.log(ctx);
24 
25     // 开始绘制
26     ctx.beginPath();
27 
28     //设置绘制起点
29     ctx.moveTo(100,100);
30 
31     //设置绘制下一个点
32     ctx.lineTo(700,400);
33 
34     //设置绘制下一个点
35     ctx.lineTo(400,100);
36 
37     //设置绘制下一个点
38     ctx.lineTo(600,500);
39 
40     //结束绘制
41     ctx.closePath();
42 
43     //设置线的宽度
44     ctx.lineWidth = 10;
45 
46     //设置绘制的样式
47     ctx.strokeStyle = "red";
48 
49     //绘制点之间的线路
50     ctx.stroke();
51 
52     // 设置填充样式
53     ctx.fillStyle = "green";
54 
55     // 填充当前视图
56     ctx.fill();
57 
58     // 注意：所有的绘制相应属性全部应该放在 closePath 之前
59 
60 </script>
61 </html>

 

　　lineJoin（bevel(斜角) / round(圆角) /miter(默认尖角)）设置返回所创建边角的类型，当两条线交汇时。绘制矩形框之前调用

关于矩形

　　strokeRect(float x,float y,float width,float height)　　绘制一个矩形边框

　　fillRect(float x,float y,float width,float height)　　填充一个矩形边框

 

在绘制字符串之前同样需要跟大家说这么几个方法。

--
fillText(String Text, float x, float y, [float maxWidth]) 填充字符串
strokeText(String Text, float x, float y, [float maxWidth]) 绘制字符串边框

同时我们既然设置了字符串的内容，我们是不是还需要去对我们字符串的对齐方式什么的去做一做设置呢？

--
textAlign 设置绘制字符串的水平对齐方式(start、end、left、right、center等)
textBaseAlign 设置绘制字符串的垂直对齐方式(top、hanging、middle、alphabetic、idecgraphic、bottom 等)

了解了这些具体的方法，那我们再来看一下，我们该如何去设置我们的字符串内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>绘制文字</h2>
        <canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
            当前浏览器不支持 canvas
        </canvas>
    </div>
</body>
<script type="text/javascript">
    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas_1");

    // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
    var ctx = canvas_1.getContext("2d");

    ctx.fillStyle = '#00f';
    ctx.font = 'italic 50px 隶书';
    ctx.textBaseline = 'top';

    //填充字符串
    ctx.fillText('李先生真是帅',0,0);
    ctx.strokeStyle = 'f0f';
    ctx.font = 'bold 45px 宋体';

    // 绘制字符串的边框
    ctx.strokeText('李鹏李鹏我爱你',0,50,200);

</script>
</html>

Paste_Image.png

2.9 设置阴影

我们在之前学习 HTML 的过程中，跟大家说过，我们的阴影可以简单分为两种，盒阴影和文字阴影，那在我们的画布中，是否也存在这么一个东西，能够为我们的文字去设置一个阴影呢？

当然有，要不我也不会专门去提这个事情，对吧。

我们学习设置阴影，同样要使用这么几个属性。

--
shadowBlur 设置阴影的模糊程度。该值是一个浮点数，该数值越大，阴影的模糊程度也就越大。
shadowColor 设置阴影的颜色。
shadowOffsetX 设置阴影在 X 方向的偏移
shadowOffsetY 设置阴影在 Y 方向的偏移

那么我们接下来，一起来看看我们该如何去设置阴影。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>绘制文字</h2>
        <canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
            当前浏览器不支持 canvas
        </canvas>
    </div>
</body>
<script type="text/javascript">
    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas_1");

    // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
    var ctx = canvas_1.getContext("2d");

    // 设置阴影的模糊程度
    ctx.shadowBlur = 5.6;

    // 设置阴影的颜色
    ctx.shadowColor = '#222';

    // 设置阴影在 X,Y 方向的偏移
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = -6;

    ctx.fillStyle = '#00f';
    ctx.font = 'italic 50px 隶书';
    ctx.textBaseline = 'top';

    //填充字符串
    ctx.fillText('李先生真是帅',0,0);
    ctx.strokeStyle = 'f0f';
    ctx.font = 'bold 45px 宋体';

    // 绘制字符串的边框
    ctx.strokeText('李鹏李鹏我爱你',0,50,200);

</script>
</html>
  • Paste_Image.png

 

摘抄自 http://blog.csdn.net/mr_lp/article/details/51908848

posted @ 2017-08-04 11:33  馋虫大盗  阅读(70)  评论(0)    收藏  举报