canvas

时间：2019-01-19 16:24:51 阅读：164 评论：0 收藏：0 [点我收藏+]

标签：selector idt doctype ret func eve sel 尺寸 context

canvas基本用法

1.什么是canvas(画布)

　　 <canvas> 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形，例如，它可以用于绘制图形，创建动画。可以使用 <canvas>标签来定义一个canvas元素，使用 <canvas>标签时，建议要成对出现，不要使用闭合的形式。

　　 <canvas>元素具有默认高宽 width: 300px; height: 150px

2.替换内容

　　对于某些不支持HTML元素 <canvas>的较老的浏览器（尤其是IE9之前的IE浏览器）只需要在标签中提供替换内容就可以。支持 <canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。不支持 <canvas>的浏览器会显示代替内容

3.canvas标签的两个属性

　　 <canvas>标签只有两个属性—— width和height。这些都是可选的。 <canvas>元素默认具有高宽（width： 300px； height：150px）。html属性设置width height时只影响画布本身不影画布内容。css属性设置width height时不但会影响画布本身的高宽，还会使画布中的内容等比例缩放（缩放参照于画布默认的尺寸）。

4.渲染上下文

　　<canvas> 元素只是创造了一个固定大小的画布，要想在它上面去绘制内容，我们需要找到它的渲染上下文。 getContext() 方法是用来获得渲染上下文和它的绘画功能。它只有一个参数，即上下文的格式。

5.canvas模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas模板</title>
    <style>
        canvas { border: 1px solid; }
    </style>
</head>
<body>
    <canvas id="test" width="300" height="300">
        <span>您的浏览器不支持画布元素，请升级或更换浏览器，推荐使用谷歌浏览器</span>
    </canvas>

    <script>

        function draw() {
            var canvasNode = document.querySelector(‘#test‘); // 获取画布

            if (!canvasNode.getContext)  return; // 检测支持性，防止在低版本浏览器报错

            var ctx = canvasNode.getContext("2d"); // 获取画笔

            // 绘制.....
        }

        draw();

    </script>
</body>

</html>

canvas绘制矩形

　　HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径

1.绘制矩形

绘制矩形的三种方法
- fillRect(x, y, width, height) --- 绘制一个填充的矩形（填充色默认为黑色）
- strokeRect(x, y, width, height) --- 绘制一个矩形的边框（默认边框为:一像素实心黑色）
- clearRect(x, y, width, height) --- 清除指定矩形区域，让清除部分完全透明。

　　x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。

　　width和height设置矩形的尺寸。（存在边框的话，边框会在width上占据一个边框的宽度，height同理）

2.strokeRect时，边框像素渲染问题

　　 context.strokeRect(10,10,50,50)

　　按理渲染出的边框应该是1px的，但canvas在渲染矩形边框时，边框宽度是平均分在偏移位置的两侧。浏览器是不会让一个像素只用自己的一半的，故渲染出的边框实际上为2px且颜色较淡。在横纵轴多偏移0.5px可解决此问题。

　　 context.strokeRect(10.5,10.5,50,50)

3.添加样式和颜色

　　 fillStyle ：设置图形的填充颜色。默认颜色黑色。

　　 strokeStyle ：设置图形轮廓的颜色。默认颜色黑色。

　　 lineWidth ：设置当前绘线的粗细。属性值必须为正数。0、负数、 Infinity 和 NaN 会被忽略。默认值是1.0。

　　 lineJoin ：设定线条与线条间接合处的样式（round : 圆角；bevel : 斜角；miter : 直角)，默认值为miter。

canvas

标签：selector idt doctype ret func eve sel 尺寸 context

原文地址：https://www.cnblogs.com/zhanghua-zh/p/10291624.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行