canvas基础理解一起来画矩形弧形渐变等

最新推荐文章于 2023-12-06 13:13:17 发布

努力学习前端的77

最新推荐文章于 2023-12-06 13:13:17 发布

阅读量455

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/qq_36545813/article/details/105296785

版权

canvas ：可以理解为一个div，作用是一块画板

新发现的不错的相关博客分享
如果想要使用canvas，需要创建一个“画家”。生成画家的方法：

var huaban = document.querySelector('.canvas');//画板
var bicaso = huaban.getContext('2d');//画家  canvas上下文对象
//绘画操作  
//表示在距离画板左上10px 10px的位置画了一个长宽分别为50px的矩形，默认填充颜色黑色  绘制矩形
bicaso.fillRect(10,10,50,50);
//表示绘制轮廓线
bicaso.strokeRect(10,10,50,50);
//绘制画笔颜色
bicaso.fillStyle='颜色';
//擦除矩形方法
bicaso.clearRect(x,y);//要擦除的矩形宽度，要擦除的矩形高度

Transparency(透明度)

globalAlpha = transparencyValue: 这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。

globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过，我认为使用rgba()设置透明度更加好一些。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    //<!-- 在页面中添加canvas元素 -->

    //<!--1. 创建一块画布。必须定义canvas的id属性以方便js调用。  可以使用css控制canvas的外观 -->
    <canvas id="myCanvas" width="300" height="300" style="border: 2px solid red;">
        //<!-- 通过javascript可以在画布中添加线条文字图片动画，也可以绘画 -->
        //<!-- 有些浏览器不支持canvas元素，会直接忽略canvas元素显示替代内容。所以需要为这些浏览器提供替代canvas的显示内容 -->
        您的浏览器不支持canvas，请更新或更换浏览器。
    </canvas>

    <canvas id="canvas2" width="300" height="300" style="border: 2px solid red;">您的浏览器不支持canvas</canvas>

    <canvas id="tutorial" width="300" height="300" style="border: 2px solid red;">您的浏览器不支持canvas</canvas>
    


    <script>
        // 2.在js脚本中获取到canvas元素
        var canvas = document.getElementById('myCanvas');

        // 判断getContext()方法是否存在，来检测浏览器是否支持canvas==========================
        if

最低0.47元/天解锁文章

努力学习前端的77

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas基础理解一起来画矩形弧形渐变等

canvas ：可以理解为一个div，作用是一块画板如果想要使用canvas，需要创建一个“画家”。生成画家的方法：var huaban = document.querySelector('.canvas');//画板var bicaso = huaban.getContext('2d');//画家 canvas上下文对象//绘画操作 //表示在距离画板左上10px 10px的位...
复制链接

扫一扫