首页 > 代码库 > canvas基础教学之矩形描边及注意事项

canvas基础教学之矩形描边及注意事项

2024-08-14 14:01:39   220人阅读

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>Learning the basics of canvas</title>        <style type="text/css">            *{                margin: 0;                padding: 0;            }            /*canvas默认大小300*150个屏幕像素，用css设置canvas的width和height，可能会导致浏览器缩放canvas             * canvas的颜色默认和父集背景颜色一样,所以应该设置颜色,避免写明JS调用无法看到canvas的情况*/            #canvas{                background-color: #00FFFF;                margin:10px;                padding: 10px;                border: 10px #FFE4C4 solid;            }        </style>            </head>    <body>        <!--canvas中间的内容不会输出，只有浏览器不支持的时候，会输出里面的文字-->        <canvas id="canvas" width="400" height="300">Canvas not supported</canvas>        <script type="text/javascript">                //定义canvas这个变量，并且设置2d环境                var canvas = document.getElementById(‘canvas‘);                    context = canvas.getContext(‘2d‘);                    //canvas 默认颜色是黑色，所以会有一个黑色矩形                    //格式为context.fillRect(x,y,width,height)                    context.fillRect(40,40,100,100);                    //注意有一个问题，你绘制的图形原点在canvas之外，可能无法正常显示                    //strokeRect给矩形描边                    context.strokeRect(200,200,100,100);        </script>    </body></html>

示意图

技术分享

canvas基础教学之矩形描边及注意事项


联系
我们