html5中canvas绘制矩形

最新推荐文章于 2023-03-10 15:41:37 发布
最新推荐文章于 2023-03-10 15:41:37 发布
阅读量843 收藏
点赞数
分类专栏： # html 文章标签： html5 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cherishSpring/article/details/52046367
版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>canvas的例子(矩形)</title>

    </head>
    <body>
        <canvas id="myCanvas" width="700" height="300"></canvas>
        
        <!--
            context是一个封装了很多绘图功能的对象，canvas元素绘制图像的时候有两种方法，
                context.fill()   //填充
                context.stroke()  //绘制边框
            
            style:在进行图形绘制前，要设置好绘图的样式
                context.fillStyle  //填充的样式
                context.strokeStyle  //边框样式
                
            context.lineWidth  //图形边框宽度
            
            颜色表示：英文名，十六进制，rgb,rgba(1-255,1-255,1-255,透明度)
            
            绘制矩形：
                context.fillRect(x,y,width,height)  
                context.strokeRect(x,y,width,height)
            
            
        -->
        <script type="text/javascript">
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext('2d');
            
            //默认填充黑色 fillStyle=black
            context.fillRect(0,0,100,100);
            
            //默认黑色边框strokeStyle
            context.strokeRect(100,100,100,100);
            
            //设置纯色
            context.fillStyle="chartreuse";
            context.strokeStyle="blue";    
            context.fillRect(0,200,100,100);
            context.strokeRect(300,100,100,100);
        
            //设置透明度，在0-1之间，值越低越透明
            context.fillStyle="rgba(255,0,0,0.1)";
            context.strokeStyle="rgba(100,124,0,0.7)";
            context.fillRect(200,200,100,100);
            context.strokeRect(500,100,100,100);
            
            context.fillStyle="cornflowerblue";
            context.fillRect(200,0,100,100);
            
            context.fillStyle="fuchsia";
            context.fillRect(400,0,100,100);
            
            context.fillStyle="darkorange";
            context.fillRect(400,200,100,100);
            
            context.fillStyle="cadetblue";
            context.fillRect(600,0,100,100);
            
            context.fillStyle="crimson";
            context.fillRect(600,200,100,100);
            
            context.strokeStyle="darkgray";
            context.strokeRect(0,0,700,300);
            
            //清除矩形区域
            context.fillStyle="aliceblue";
            context.clearRect(150,50,400,200);
        </script>
    </body>
    </html>
cherishSpring
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法
weixin_29475313的博客
06-04 1934
使用HTML5 canvas绘制一个矩形的方法发布时间：2020-08-29 11:23:12来源：亿速云阅读：102作者：小新这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一个矩形的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。使用HTML5 canvas绘制一个矩形，我们需要用到Canvas上下文的rect()方法。我们来看一个具体的例子代...
Canvas的各种方法大集合
abbydong的博客
11-14 7161
一、Canvas简介 Canvas类 二、用Canvas画直线，画圆，画弧线，画文字 1.画直线——drawLine(); public void drawLine (float startX, float startY, float stopX, float stopY, Paint paint) 参数说明 参数 说明 startX： 起始端点的X坐标。
HTML5 Canvas: 绘制矩形
cshao的专栏
06-05 4365
原文： http://www.lifelaf.com/blog/?p=363 本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “The Basic Rectangle Shape”. 让我们来看一下Canvas内置的简单几何图形 — 矩形的绘制。在Canvas中，绘制矩形有三种方法：填充(fillRect)、描边(St
canvas常用方法总结
qq_42515626的博客
08-01 3829
一、渲染上下文 var canvas = document.getElementById('tutorial'); //获得 2d 上下文对象 var ctx = canvas.getContext('2d'); 二、绘制形状 绘制矩形 fillRect(x, y, width, height)：绘制一个填充的矩形。 strokeRect(x, y, width, height)：绘制一个矩形的边框。 clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的
h5 Canvas矩形的绘制
suwu150
02-26 9614
h5 Canvas矩形的绘制 1.绘制矩形api 在Canvas中提供了绘制矩形的API： fillRect(x, y, width, height)：绘制一个填充的矩形 strokeRect(x, y, width, height)：绘制一个矩形的边框 clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明 除此之外还可以通过Canvas中Canv...
html5画布-绘制矩形
xyy_933的博客
05-08 727
绘制矩形 var c=document.getElementById('carvas'); var cxt=c.getContext("2d"); cxt.fillStyle="blue"; cxt.fillRect(0,0,400,300); 说明:使用方法如下： 1.fillrect,绘制一个矩形,只有填充色,没有边框 2.strokerect,绘制一个带
HTML5中的canvas绘制三个矩形
itscassie_的博客
09-14 1688
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;title&gt;绘制三个矩形&lt;/title&gt;         &lt;style&gt;             body{                 w
HTML5 Canvas中绘制矩形实例
09-28
在Canvas中，绘制矩形是基本操作之一，这在创建各种界面元素、游戏场景或数据可视化时非常有用。本节将详细介绍如何使用fillRect、strokeRect和clearRect三种API在Canvas上绘制矩形。 首先，fillRect(x, y, width, ...
HTML5 在canvas中绘制矩形附效果图
09-28
以下是关于在HTML5 Canvas上绘制矩形的详细解释： 1. **fillRect()**： fillRect(x, y, width, height) 方法用于绘制一个实心矩形。这里的参数分别代表矩形左上角的x坐标、y坐标以及矩形的宽度和高度。例如，在...
HTML5 canvas基本绘图之绘制矩形
09-28
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制矩形方法，感兴趣的小伙伴们可以参考一下
Java实验答案
02-22
Java实验上机答案，内附详细解释说明，答题规范有效。
Java实验的答案源程序
04-25
我学习Java时做的实验题目的一些答案，可供正在学习Java的莘莘学子们参考一下，应该有你想要的实验的答 案。部分题目如下，可看一下和你们老师布置的实验题目是否一样：编写一个程序输出如下图案。编制applet 程序，绘制一个长120、宽80的红色矩形，并在矩形内部绘制一个兰色内切椭圆。设有一批英文单词存放在一个 数组中，编制一个图形界面程序浏览单词。在界面中安排一个标签显示单词，另有“上一个”、“下一个”两 个按钮实现单词的前后翻动。编写一个鼠标位置跟踪程序，在鼠标所在位置为中心绘制一个红色十字架。编制 一个声音播放控制程序，在Applet面板上安排“播放”和“停止”两个按钮，点击“播放”将播放声音，点击 “停止”可停止播放。另外，Applet启动和离开时将自动播放和停止播放，要播放的声音文件名由Applet参数 提供。有一个南北向的桥，只能容纳一个人，现桥的两边分别有10人和12人，编制一个多线程序让这些人到达 对岸，每个人用一个线程表示，桥为共享资源。在过桥的过程中显示谁在过桥及其走向。编写一个可变颜色的 标签，用一个按钮控制颜色的改变与停止。点击按钮颜色停止变化，再点击该按钮颜色又变化。颜色的变化可 用随机数确定。编写一个图片播放程序，图片的文件名为 file01.jpg，file02.jpg，…filen.jpg, 其中n由命 令行输入，要求用多线程自动播放。1）设有一个由10个英文单词构成的字符串数组，要求： （1）统计以字母w开头的单词数； （2）统计单词中含“or”字符串的单词数； （3）统计长度为3的单词数。 创建一个程序，输出今天的年、月、日。 提示：创建一个java.util.Date类的对象代表当前的系统日期，使用对象的getYear()方法、getMonth()方法、 getDay()方法可获得对应的年月日。编写一个三角形类，能根据3个实数构造三角形对象，如果三个实数不满足 三角形的条件，则自动构造以最小值为边的等边三角形。输入任意三个数，求构造的三角形面积。1) 利用随机 函数定义10对(x,y)值，由此创建的Point类实例存入一个数组中，按与原点（0，0）的距离由小到大的顺序输 出所有的点及到原点的距离。 编写一个人与计算机对拿火柴的游戏程序。利用随机函数Math.random()产生火 柴数量（20～50)， 每次最多拿3根，拿到最后一根为胜者。 要求：游戏过程要显示火柴总数，选择谁先拿；每步要显示剩余火柴数量，以及计算机拿的数量，并提示用户 输入拿多少；结束时显示谁是胜者。 【解题算法提示】 (1) 产生火柴总数（amount）； (2) 决定随先拿（whoplay：1--人， 2--计算机）； (3) 定义一个变量保存剩余火柴数量（remain)=amount ； (4) 当remain>0 循环 4.1 根据whoplay的值决定是计算机拿x根还是提示人拿x根；计算机拿时最好带有智能，人拿时要限制输 入数量。 4.2 修改 whoplay的值； 4.3 修改remain的值； (5) 根据whoplay的值决定胜者
html5 canvas绘制矩形和圆形的实例代码
09-27
下面小编就为大家带来一篇html5 canvas绘制矩形和圆形的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起公司小编过来看看吧
Canvas所有的属性和方法
最新发布
Br不二
03-10 2011
关于`Canvas`的常用属性和方法总结以及代码实例，canvas 是 HTML5 中新增的标签，它允许开发者使用 JavaScript 在网页上绘制 2D 或 3D 图形。
html 绘制矩形,HTML5中使用canvas绘制矩形
weixin_39687881的博客
06-07 824
canvas是HTML5中新增的一个元素，使用Canvas可以绘制任何你喜欢的图形。先来认识什么是Canvas？1.在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图像描绘。2. canvas通过JavaScript来绘制2D图形，它是逐像素进行渲染的。3.在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要...
Html5画布（canvas）实例之绘制矩形
weixin_39037804的博客
09-19 1687
路径方式绘制 - 矩形 | rect() canvas/shape/path/rect.html <!DOCTYPE HTML> <html> <head> <title>以路径的方式在 ca...
HTML5中canvas画图之画矩形和矩形掏空
热门推荐
花2不谢
06-10 1万+
rect方法用于绘制矩形（长方形）。其语法如下: context.rect(x，y，高度，宽度); 绘制代码如下: 绘制矩形 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); //绘制 ctx.fillStyle="#ff00000"; ct
HTML5 Canvas中绘制矩形
歪脖先生的博客
04-22 3788
绘制矩形上一节，我们使用lineTo()方法绘制一个封闭的矩形。其实，canvas的API提供了rect()方法可以绘制矩形。rect()方法是路径方法，它会把指定的矩形添加到当前路径的子路径中。它只添加路径，绘制图形还是由stroke()或fill()方法完成。除了rect()方法之外，Canvas 的API还提供了三个直接处理矩形的方法：fillRect(x, y, width, height...
[转]html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
weixin_33975951的博客
12-08 154
上一篇文章我讲了画矩形和圆形的方法，他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来。一个正常的圆角矩形，我们先假设他四个角的圆角弧度一致——因为这样比较好画。我们动用把面拆成线条的能力，很容易就能发现圆角矩形其实是由4条钩子般的曲线组成。 提到钩子，如果你看过我介绍arcTo的文章，那么可能你一下就明白了这种图形就可以用arcTo画出来。我讲...
HTML5 Canvas 2.0增强版：圆角矩形绘制函数库
HTML5+Canvas+作图函数库2.0版本是金海龙（bigengineer@163.com）近期发布的一项更新，针对HTML5 Canvas技术提供了一系列增强的图形绘制函数。HTML5 Canvas是一个强大的HTML5 API，它允许网页开发者在浏览器上动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值