html5---画布的使用

最新推荐文章于 2022-05-06 13:33:15 发布

pocketful~

最新推荐文章于 2022-05-06 13:33:15 发布

阅读量241

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/Pocketful/article/details/107287537

版权

画布

1、绘制矩形：

（1）使用原生的js，获取画布元素
（2）获取2d上下文对象
（3）设置绘图样式，绘制填充的矩形
context.fillStyle=“pink”;
（4）设置参数
context.fillRect(0,0.100,200);
（5）绘制边框矩形
context.lineWide=5;
（6）设置边框样式
context.strokeStyle=“red”;
（7）设置边框的长宽高
context.strokeRect();

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
    
            border: 1px solid red;
            }
    </style>
</head>
<body>
    <canvas id="canvas" width="400px" height="400px"></canvas>
    <script>
        //使用原生js
        window.onload=function(){
    
            //获取画布元素
            var canvas=document.getElementById("canvas");
            //获取2d上下文对象
            var  context=canvas.getContext("2d");
            //设置绘图样式
            //绘制填充矩形
            context.fillStyle="pink";
            //参数 x,y,宽，高
            context.fillRect(0,0,100,200);
           
            //绘制边框矩形
            context.lineWidth = 5 
            //设置边框样式
            context.strokeStyle="skyblue"
            context.strokeRect(100,100,100,100)

            //绘制四个矩形拼接成一个大矩形
            context.strokeStyle="blue"
            context.strokeRect(205,100

最低0.47元/天解锁文章

pocketful~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5---画布的使用

画布1、绘制矩形：（1）使用原生的js，获取画布元素（2）获取2d上下文对象（3）设置绘图样式，绘制填充的矩形context.fillStyle=“pink”;（4）设置参数context.fillRect(0,0.100,200);（5）绘制边框矩形context.lineWide=5;（6）设置边框样式context.strokeStyle=“red”;（7）设置边框的长宽高context.strokeRect();例子：<!DOCTYPE html><
复制链接

扫一扫

专栏目录