html5-canvas标签-绘制矩形

最新推荐文章于 2022-03-17 19:21:41 发布

aizhi1851

最新推荐文章于 2022-03-17 19:21:41 发布

阅读量133

点赞数

原文链接：http://www.cnblogs.com/lufy/archive/2012/05/05/2484968.html

版权

function draw(){
    
        var dObj = document.getElementById("tubar");
        var cObj = dObj.getContext("2d");
        
        cObj.fillStyle = "rgba(200,0,0,0.5)"
        cObj.fillRect(30,30,100,100);
        cObj.strokeRect(45,45,70,70);
        cObj.clearRect(50,50,60,60);        
}

</body>

cObj.fillStyle = "rgba(200,0,0,0.5)" ：定义这个canvas对象的颜色和透明度;

cObj.fillRect(30,30,100,100):绘制一个矩形，
坐标置值相对于canvas的左上原点，X轴移动30PX,Y轴移动30PX;height设置100px;width设置100px;

cObj.strokeRect(45,45,70,70):绘制一个矩形线框（里面空心的），

坐标置值相对于canvas的左上原点，X轴移动45PX,Y轴移动45PX;height设置100px;width设置100px;

 cObj.clearRect(50,50,60,60); 绘制一个矩形，将cObj.fillRect的矩形的一个地方“挖空”;

坐标置值相对于canvas的左上原点，X轴移动50PX,Y轴移动50PX;height设置100px;width设置100px;

如下图：红色为矩形，黑色为线框，白色为“挖空”

白色“挖空”和黑色线框，定位在红色的水平垂直居中的公式：

横坐标=（外矩形的宽-居中元素的宽）/2 + 外矩形的横坐标

【上例：黑色线框横坐标：45 = （100-70）/2+30】

纵坐标=（外矩形的高-居中元素的高）/2 + 外矩形的纵坐标

【上例：黑色线框纵坐标：45 = （100-70）/2+30】

转载于:https://www.cnblogs.com/lufy/archive/2012/05/05/2484968.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

aizhi1851

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

html语言画画,网页|HTML5 也可以画一画（canvas）

weixin_29230059的博客

06-02

1243

1.引言在日常生活中总喜欢涂涂画画写写，这样可以使表达更加直观，记录的也更加详细，而在HTML5中同样可以画一画。canvas意为画布，现实生活中用它来作画，在HTML5中的canvas与之类似，可以称它为“网页中的画布”，有了这个画布便可以轻松的在网页中绘制图形、文字、图片等。2.初识画布HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。因为标签只是图形容器，所以...

HTML5 绘制矩形

u011107187的专栏

07-21

678

var ctx=mycanvas.getContext("2d"); ctx.fillStyle="lime"; //矩形的颜色 ctx.fillRect(20,20,20,20); //矩形离canvas left 20px , 离canvas top

参与评论您还未登录，请先登录后发表或查看评论

利用canvas绘制一个矩形

destiny1234544的博客

06-01

1564

下面展示一些内联代码片。 // A code block var foo = 'bar'; // An highlighted block var foo = 'bar'; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas矩形绘制</title> <script type="text/javascri

说说如何使用 Canvas 绘制基本矩形

读万卷书，行万里路

06-14

839

HTML5 提供的 canvas 元素，可以让我们使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，我们可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。这次先说说如何绘制基本矩形。 1 搭建 Canvas 2D 环境（1）引入 <canvas> 标签在 HTML 的 <body> 中新增一个 <canvas> 标签。形如： <canvas id="canvas" width="500" height="5

26 canvas绘制矩形

丨Anna丨的博客

10-28

5682

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

awesome-canvas：精选HTML5 Canvas精选清单，并提供示例，相关文章和文章

01-31

HTML5 Canvas是一个强大的Web图形API，它允许开发者在网页上直接进行动态图形绘制。这个"awesome-canvas"项目是一个集合，汇聚了各种HTML5 Canvas相关的资源、教程、库和工具，旨在帮助开发者深入理解和充分利用...

HTML5 canvas基本绘图之绘制矩形

09-28

HTML5中的<canvas>标签是用来进行图形绘制的一个元素，它提供的绘图区域允许我们使用JavaScript来绘制各种图形。本文将详细介绍如何使用canvas元素来进行基本的矩形绘制。首先，canvas元素本身只是一个容器，它...

基于Html5-canvas炫酷的数字时钟.zip

热门推荐

幺妹儿儿的博客

03-17

1万+

目录一、什么是Canvas？二、Canvas元素的定义（写在html文件的body中）三、使用JavaScript获取网页中的Canvas对象四、Canvas绘图（1）绘制直线（2）绘制矩形（3）绘制圆弧（4）填充和描边一、什么是Canvas？ canvas就是画布，可以画线，图形，填充，图像绘制等操作。 canvas不仅提供简单的二维矢量绘图，也提供三维绘图。二、Canvas元素的定义（写在html文件的body中） <canvas id=“myCa

基于HTML5 画布功能canvas的绘画板：画线、画圆、画矩形、橡皮、改变线条

前端之路

07-01

4354

基于HTML5 画布功能canvas的绘画板：画线、画圆、画矩形、橡皮、改变线条

使用canvas实现一个简单的画布

weixin_42527887的博客

05-07

915

HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，可以控制其每一个像素。 canvas拥有多种绘制矩形、路径、圆形、字符以及添加图像的方法。要创建canvas的语法为： body中： <canvas id = "clock" width = "500" height="500"></canvas> *注意：这里的c...

初学HTML5——画布(canvas)

lxl513513的博客

04-04

3388

一.canvas介绍 canvas为画布，使用canvas便可以轻松的在网页上绘制图形，文字，图片等。二.画布的使用 1.创建画布： HTML5中提供了<canvas>标签，使用<canvas>标签可以在网页中创建一个矩形区域的画布： <canvas id="cavsElem" width=“400” height="300"> 你的浏览器不支持canva...

html5新增标签canvas画布基础详解及实操案例（上）

dayewandou的博客

10-08

2609

如果文章有不对之处，还请大神们多多指点 canvas也是html中的一个元素，可以给这个元素添加一些html属性，属性width默认为300px，heigth默认为150px； canvas是h5中新增的众多元素中的一个，直译过来叫做画布，可以用来通过h5绘制一些图形效果；刚开始的时候只是知道是用来做一些图形效果的，但是后来了解到canvas的强大可以制

html5画布-绘制矩形

xyy_933的博客

05-08

744

绘制矩形 var c=document.getElementById('carvas'); var cxt=c.getContext("2d"); cxt.fillStyle="blue"; cxt.fillRect(0,0,400,300); 说明:使用方法如下： 1.fillrect,绘制一个矩形,只有填充色,没有边框 2.strokerect,绘制一个带

HTML/CSS题库 5-10

GXing007的博客

03-09

2919

1.要运用css动画，你需要运用什么规则？ A.animation B.keyframes C.flash D.transition正确答案：B解析：animation属性，keyframes规则2.假设一个搜索结果展示页面，需要把搜索关键词高亮显示，应该使用以下哪个HTML标签？ A.<em> B.<highlight> C.&l...

h5 Canvas矩形的绘制

suwu150

02-26

9717

h5 Canvas矩形的绘制 1.绘制矩形api 在Canvas中提供了绘制矩形的API： fillRect(x, y, width, height)：绘制一个填充的矩形 strokeRect(x, y, width, height)：绘制一个矩形的边框 clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明除此之外还可以通过Canvas中Canv...

Canvas学习记录：画布设置及简单图形绘制

努力努力再努力w

06-17

546

概览 <canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素类似<img>，但只有两个属性：width 和 height (初始化为 width: 300px ， height：150px) 用width和height属性为明确规定宽高，而不是使用CSS。 getContext() :获得渲染上下文和它的绘画功能检查浏览器是否支...