HTML5－Canvas画布的使用

最新推荐文章于 2022-06-20 18:47:18 发布

Q_Jimmy

最新推荐文章于 2022-06-20 18:47:18 发布

阅读量933

点赞数

分类专栏： HTML5 文章标签： HTML5Canvas的使用技巧

本文链接：https://blog.csdn.net/Q_Jimmy/article/details/49688435

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一，首先让我们来了解一下CSS solid属性

solid的意思为：solid.adj 固体的，实心的，结实的，可靠的

n.固体，立方体

solid主要有3个功能：

（1）给文本加边框

例如：stye="border:thin solid red"

参数分析：border表示设置边框，后面三个参数是设置边框的属性：thin（表示设置边框为细线，除此之外还有：medium[中粗线]，thick（粗线）也可以自定义宽度：如：1px，1cm等），solid（表示设置边框的类型的类型为实线），red（表示设置边框的颜色为红色，也可以用十六进制表示）

（2）给导航菜单加分隔线"|"

一个边框的四条边的属性如下：

边框线名称：border-top（上边框线）、border-right（右边框线）、border-bottom（下边框线）和boder-left（左边框线）

顺序：上边框线、右边框线、下边框线、左边框线；

每条边框的属性和border相同。

（3）采用不同宽度和颜色的边框线

二，对font－family的理解

font-family 规定元素的字体系列。

有两种类型的字体系列名称：

（1）指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。

（2）通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

三，CSS font-size 属性

定义： font-size 属性可设置字体的尺寸。

说明：该属性设置元素的字体大小。

注意：实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。

各关键字对应的字体必须比一个最小关键字相应字体要高，并且要小于下一个最大关键字对应的字体。

四，关于JavaScript脚本语法

在html中嵌套javascript代码：

方式一

内部编写javascript逻辑代码

相关代码逻辑；

*/
</script>

方式二

外部引用javascript逻辑代码

</script>

脚本语法：

object.style.fontSize="larger"

例子

body{

font-size:x-large;

}

font-size:10px;

}

可能的值

属性：xx-small，x-small，small，medium，large，x-large，xx-large

描述：把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。

默认值：medium。

smaller

把 font-size 设置为比父元素更小的尺寸。

larger

把 font-size 设置为比父元素更大的尺寸。

length

把 font-size 设置为一个固定的值。

把 font-size 设置为基于父元素的一个百分比。

五，canvas的绘图方式

Contex 上下文默认两种绘制方式：

第一种：绘制线（stroke）

第二种：填充：fill

canvas.translate(x,y)

含义：表示原来的原点分别在x轴和y轴偏移多远的距离，然后以偏移后的位置作为坐标原点。也就是说原来在（100,100）,然后translate（1，1）新的坐标原点在（101,101）而不是（1,1）

fillRect(x,y,width,height)方法：绘制矩形

strokeRect（x,y,width,height）方法：绘制四周产生描边效果的矩形

目标：定义一个通用的方法，可根据用户的需求绘制各种形状的图形

效果：

在此示范三角形，菱形，八边形，圆

理解实例：

<!doctype html>
<html>
<head>
    <meta charset="gb2312">
    <title>画图</title>
</head>

<body>
<canvas id = "myCanvas" width = '500' height = '500'>Canvas画线技巧</canvas>
<script>
    var myCanvas = document.getElementById("myCanvas");
    var context =  myCanvas.getContext("2d");
    function drawPath(x, y, n, r)
    {
        var i,ang;
        ang = Math.PI*2/n //旋转的角度
        context.save();//保存状态
        context.fillStyle ='rgba(255,0,0,.3)';//填充红色，半透明
        context.strokeStyle ='hsl(120,50%,50%)';//填充绿色
        context.lineWidth = 1;//设置线宽
        context.translate(x, y);//原点移到x,y处，即要画的多边形中心
        context.moveTo(0, -r);//据中心r距离处画点
        context.beginPath();
        for(i = 0;i < n; i ++)
        {
            context.rotate(ang)//旋转
            context.lineTo(0, -r);//据中心r距离处连线
        }
        context.closePath();
        context.stroke();
        context.fill();
        context.restore();//返回原始状态
    }
    drawPath(100, 100, 3, 40)//在100,100处画一个半径为40的三边形
    drawPath(200, 100, 8, 40)//在200,100处画一个半径为40的八边形
    drawPath(300, 100, 60, 40)//在300,100处画一个半径为40的圆
    drawPath(400, 100, 4, 40)//在100,200处画一个菱形
</script>
</body>
</html>

六，Css3的相关属性
HSL(H,S,L)
取值：
H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%
L：
Lightness(亮度)。取值为：0.0% - 100.0%

Q_Jimmy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5－Canvas画布的使用

一，首先让我们来了解一下CSS solid属性solid的意思为：solid.adj 固体的，实心的，结实的，可靠的 n.固体，立方体solid主要有3个功能：（1）给文本加边框例如：stye="border:thin solid red" 参数分析：border表示设置边框，后面三个参数是设置
复制链接

扫一扫