canvas clear 指定属性的元素_HTML5（一）Canvas

最新推荐文章于 2024-03-26 15:37:50 发布
最新推荐文章于 2024-03-26 15:37:50 发布
阅读量591 收藏 1
点赞数
文章标签： canvas clear 指定属性的元素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34538771/article/details/112092421
版权

HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

HTML 2.0——1995年11月，RFC 1866发布

HTML 3.2——1997年1月14日，W3C发布推荐标准

HTML 4.0——1997年12月18日，W3C发布推荐标准

HTML 4.01——1999年12月24日，W3C发布推荐标准

HTML 5——2014年10月28日，W3C发布推荐标准

HTML5 成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML5 规则：基于 HTML、CSS、DOM 以及 JavaScript，扩充用于绘画的 canvas 元素、用于媒介回放的 video 和 audio 元素、对本地离线存储的更好的支持、新的特殊内容元素，比如 article、footer、header、nav、section、新的表单控件，比如 calendar、date、time、email、url、search。减少对外部插件的需求(比如 Flash)。更优秀的错误处理。更多取代脚本的标记。HTML5 应该独立于设备。开发进程应对公众透明。浏览器支持情况：最新版本的 Safari、Chrome、Firefox 以及 Opera 支持 HTML5 特性。Internet Explorer 9以上版本支持 HTML5 特性。

第1章 Canvas

    HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。 标签只是图形容器，所以必须使用脚本来绘制图形。

    通俗讲就是是一张白纸，而JavaScript脚本代码就是画笔。你可以使用JavaScript在canvas上绘制路径,盒、圆、字符以及添加图像。所以你需要先有一定的JavaScript基础。如果没有这方面基础，那就没有吧，照葫芦画瓢，等接触多了，就会发现依然啥都不明白。我的理念：不明白就不明白，要抱有站在巨人肩膀上写代码觉悟，会用、会举一反三足矣，没指望你能研究的精通，把发明语言的人拍死在沙滩上。凡事留一线，日后好相见，给别人留条活路，给自己的头发留条活路(安慰自己)。

canvas 坐标

canvas 是一个二维网格，canvas 的左上角坐标为 (0,0)，canvas 的右下角坐标为 (canvas的宽度,canvas的长度)，说白了就是，画布是一个x-y坐标系统,只不过这个坐标系，有点和小学数学中的坐标系有点出入，我用个图来说明一下

07eae54cf2691808ad92f8d303182fa8.png

从图中可以看到，y轴反过来了。y轴箭头方向为正值。

现在让我们磨刀霍霍开始吧！

canvas 标签使用代码如下：

<canvas id="canvasId1" width="200" height="100">canvas>

ps:

标签通常需要指定一个id属性 (脚本中经常引用), 默认情况下 元素没有边框和内容width 和 height 属性定义的画布的大小,在HTML页面中使用多个 标签

yk_2020

用JavaScript画画

//首先，找到画布，既找到  标签var c=document.getElementById("canvasId1");//接着 创建画笔，创建context对象 getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法var ctx=c.getContext("2d");//然后 给画笔沾点颜色ctx.fillStyle="#FF0000";//紧接着 画个长方形  fillRect(x,y,width,height) x,y画布起始点坐标，width 长方形宽度,height长方形高度ctx.fillRect(0,0,150,75);

这样就画好了一个长方形。

整体代码如下：

<html>   <head>      <title>HTML5title>   head>   <body>        <canvas id="canvasId1" width="200" height="100" style="border:1px solid #c3c3c3;">canvas>    <script>      //首先，找到画布，既找到  标签      var c=document.getElementById("canvasId1");      //接着 创建画笔，创建context对象 getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法      var ctx=c.getContext("2d");      //然后 给画笔沾点颜色      ctx.fillStyle="#FF0000";      //紧接着 画个长方形  fillRect(x,y,width,height) x,y画布起始点坐标，width 长方形宽度,height长方形高度      ctx.fillRect(0,0,150,75);script>   body>html>

来看一下效果：

de16cc4ef5a7cae07c5029288f7d5998.png

下面是收集了一些常规画笔操作，后面然后我再汇总到一个实例中，可以跟着一起练习一下

方法使用说明

moveTo(x,y) 

lineTo(x,y) 

closePath();

ctx.moveTo(0,0);ctx.lineTo(20,10);ctx.lineTo(40,10);ctx.closePath();ctx.stroke();在画布Canvas上画线moveTo(x,y) 定义线条开始坐标lineTo(x,y) 定义线条结束坐标closePath()返回开始点

1、arc(x,y,r,start,stop,counterclockwise)

2、arcTo(x1,y1,x2,y2,r);

1、

ctx.beginPath();

//Math.PI就是圆周率π，PI是弧度制的π,也就是180°

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

2、

ctx.beginPath();

// 创建开始点

ctx.moveTo(20,20); // 创建水平线        

ctx.lineTo(100,20);  // 创建弧       

ctx.arcTo(150,20,150,70,50);

// 创建垂直线

ctx.lineTo(150,120); 

// 进行绘制      

ctx.stroke();               

在画布Canvas上绘制圆形、圆弧

1、arc(x,y,r,start,stop,counterclockwise)，

x、y为圆心位置，

r为圆半径，

start为开始角度，

stop为结束角度,

counterclockwise可选填。逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

76e5f5e37863d9b904934a2f576c596c.png

2、arcTo() 方法在画布上创建介于两个切线之间的弧/曲线

arcTo(x1,y1,x2,y2,r);

x1 弧的起点的 x 坐标

y1 弧的起点的 y 坐标

x2 弧的终点的 x 坐标

y2 弧的终点的 y 坐标

r 弧的半径

1.rect(x,y,width,height)

2.fillRect(x,y,width,height) 

3.strokeRect(x,y,width,height)

4.clearRect(x,y,width,height)

5.clip();

1、

ctx.rect(20,20,150,100);

ctx.stroke();

2、

ctx.fillRect(0,0,150,100);

3、

ctx.strokeRect(20,20,150,100);

4、

ctx.clearRect(20,20,100,50);

在画布Canvas上绘制圆形矩形

1.rect(x,y,width,height)绘制矩形

2.fillRect(x,y,width,height)绘制“被填充”的矩形，默认的填充颜色是黑色。

3.strokeRect(x,y,width,height)绘制矩形(无填充)默认颜色是黑色边框。

4.clearRect(x,y,width,height)在给定的矩形内清除指定的像素

5.clip();按照指定尺寸剪辑

1、quadraticCurveTo(cpx,cpy,x,y);

2、.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

1、

ctx.beginPath();

ctx.moveTo(20,20);

ctx.quadraticCurveTo(20,100,200,20);

ctx.stroke();

2、

ctx.beginPath();

ctx.moveTo(20,20);

ctx.bezierCurveTo(20,100,200,100,200,20);

ctx.stroke();

在画布Canvas上绘制贝塞尔曲线

1，二次贝塞尔37c4e46ad70ed81b6ae0bb44ef1497bf.png

.quadraticCurveTo(cpx,cpy,x,y);

cpx 贝塞尔控制点的 x 坐标

cpy 贝塞尔控制点的 y 坐标

x 结束点的 x 坐标

y 结束点的 y 坐标

2,三次贝塞尔

606e13bdb40fb884452a9e866fda8b29.png

ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

cp1x 第一个贝塞尔控制点的 x 坐标

cp1y 第一个贝塞尔控制点的 y 坐标

cp2x 第二个贝塞尔控制点的 x 坐标

cp2y 第二个贝塞尔控制点的 y 坐标

x 结束点的 x 坐标

y 结束点的 y 坐标

1、.fillText(text,x,y,maxWidth);

2、.strokeText(text,x,y,maxWidth);

1、

//设置字体   

ctx.font="20px Georgia";

ctx.fillText("Hello World!",10,50);

2、

ctx.font="20px Georgia";

ctx.strokeText("Hello World!",10,50);

在画布Canvas上绘制文字

实体字体

fillText(text,x,y,maxWidth);

text规定在画布上输出的文本。

x开始绘制文本的 x 坐标位置(相对于画布)。

y开始绘制文本的 y 坐标位置(相对于画布)。

maxWidth可选填。允许的最大文本宽度，以像素计。

空心字体

strokeText(text,x,y,maxWidth);

text规定在画布上输出的文本。

x开始绘制文本的 x 坐标位置(相对于画布)。

y开始绘制文本的 y 坐标位置(相对于画布)。

maxWidth可选填。允许的最大文本宽度，以像素计。

以上仅为常用方法，这只是开始，更多的方法需要探索，纸上谈兵终觉浅，好了，开始施展才华把！！个人建议先找张纸和笔，打个草稿！

a925b5a634caef12a16a05e175003336.png

效果：

61e952b56b5c4c55770106b167b805b7.gif

源码如下:

<html>   <head>      <title>HTML5title>   head>   <body>      <h1>HTML5 - moveTo(x,y)、lineTo(x,y)、closePath() 实现画三角形h1>    <canvas id="canvasId1" width="500" height="300" style="border:1px solid #c3c3c3;">canvas>      <h1>HTML5 - arc(x,y,r,start,stop,counterclockwise)、arcTo(x1,y1,x2,y2,r)、fillRect(x1,y1,x2,y2,r); 实现画圆及圆弧h1>    <canvas id="canvasId2" width="500" height="300" style="border:1px solid #c3c3c3;">canvas>    <h1>HTML5 - quadraticCurveTo(cpx,cpy,x,y)、bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 实现绘制贝塞尔曲线h1>    <canvas id="canvasId3" width="500" height="300" style="border:1px solid #c3c3c3;">canvas>    <h1>HTML5 - fillText(text,x,y,maxWidth)、strokeText(text,x,y,maxWidth); 实现绘制文字h1>    <canvas id="canvasId4" width="500" height="300" style="border:1px solid #c3c3c3;">canvas>    <script>         //HTML5 - moveTo(x,y)、lineTo(x,y)、closePath() 实现画三角形      var ctx1=document.getElementById("canvasId1").getContext("2d");          //将起始点移动到(20,20)坐标        ctx1.moveTo(20,20);        //划线 从坐标(20,20)到坐标(250,20)        ctx1.lineTo(250,20);        //划线 从坐标(250,20)到坐标(250,200)        ctx1.lineTo(250,200);        //划线 回到起始点        ctx1.closePath();        //将划线描边        ctx1.stroke();              //HTML5 - arc(x,y,r,start,stop,counterclockwise)、arcTo(x1,y1,x2,y2,r)、fillRect(x1,y1,x2,y2,r); 实现画圆及圆弧        var ctx2=document.getElementById("canvasId2").getContext("2d");        //画第一个圆        ctx2.beginPath();              ctx2.arc(100,100,100,0,2*Math.PI);        //绘画的区域填充红色        ctx2.fillStyle="red";        ctx2.fill();        //画第二个圆        ctx2.beginPath();        //绘画圆        ctx2.arc(300,100,100,0,2*Math.PI);        ctx2.strokeStyle="green";        //将划线描边        ctx2.stroke();        //画第一个圆弧        ctx2.beginPath();        // 创建开始点        ctx2.moveTo(0,200);                  ctx2.lineTo(50,200);                // 创建弧  两个点的x轴要一致             ctx2.arcTo(100,200,100,300,50);        ctx2.closePath();        // 进行绘制              ctx2.stroke();          //画第二个圆弧        ctx2.beginPath();        ctx2.moveTo(200,200);                ctx2.lineTo(250,200);                ctx2.arcTo(300,200,300,250,50);        ctx2.closePath();        ctx2.fill();      //HTML5 - quadraticCurveTo(cpx,cpy,x,y)、bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 实现绘制贝塞尔曲线      var ctx3=document.getElementById("canvasId3").getContext("2d");        //划线 从坐标(20,20)到坐标(250,20)        ctx3.beginPath();        ctx3.moveTo(50,50);        ctx3.quadraticCurveTo(50,200,250,100);        ctx3.stroke();                ctx3.beginPath();        ctx3.moveTo(60,60);        ctx3.bezierCurveTo(60,300,250,300,260,110);        // 创建渐变        var gradient=ctx3.createLinearGradient(0,0,500,0);        gradient.addColorStop("0","magenta");        gradient.addColorStop("0.5","blue");        gradient.addColorStop("1.0","red");        // 用渐变填色        ctx3.strokeStyle=gradient;        ctx3.stroke();              //HTML5 - HTML5 - fillText(text,x,y,maxWidth)、strokeText(text,x,y,maxWidth); 实现绘制文字      var ctx4=document.getElementById("canvasId4").getContext("2d");        ctx4.font="20px Georgia";        ctx4.fillText("Hello 荧光之炽!",50,50);        // 创建渐变        var gradient=ctx4.createLinearGradient(0,0,500,0);        gradient.addColorStop("0","magenta");        gradient.addColorStop("0.5","blue");        gradient.addColorStop("1.0","red");        // 用渐变填色        ctx4.strokeStyle=gradient;        ctx4.strokeText("Hello 荧光之炽!",50,190);script>   body>html>

打赏一下呗

e4643c9655ecb3e6a30ce5a8fed17c9b.png

西门町老湿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【canvas】fill、stroke、clear
逆风飞翔的代码狗
04-16 1022
基本原理：先通过clear删除原有路径，通过定时器对其中一个属性进行改变，再重新绘制 canvas -- 轻量级动画（相比flash而言） 而且canvas一旦某个元素绘制完毕就无法再对该元素进行修改 但是flash通过一定的API可以 canvas一般的步骤： <canvas id="myCanvas" width="600" height="400">浏览器版本不支持canvas,请先升级浏览器</canvas> canvas标签内部的文字在浏览器版本不支持canvas标签的时候
Vue利用canvas实现移动端手写板的方法
12-29
本文介绍了Vue利用canvas实现移动端手写板的方法，分享给大家，具体如下： <template> <div class=hello> <!--touchstart,touchmove,touchend,touchcancel 这--> <button type= v-on:click=clear>清除</button> <button v-on:click=save>保存</button> <canvas id=canvas width=300 height=600 xss=removed>Canvas画板</
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
12-13
在现实世界中，我们使用画笔在画板上进行绘画；在html5 canvas中，我们同样可以使用canvas的画笔——CanvasRenderingContext2D对象在canvas上进行绘画。众所周知，我们的画笔一般都会与橡皮擦配套使用，以便于纠正绘画过程中的错误并重新绘画。在html5 canvas中，CanvasRenderingContext2D对象也同样给我们提供了一个可以永远重复使用的橡皮擦——clearRect()方法。 XML/HTML Code复制内容到剪贴板 clearRect(x, y, width, height)   CanvasRenderingContext
canvas擦除功能—圆形橡皮擦
最新发布
weixin_44434938的博客
03-26 1064
canvas擦除功能—圆形橡皮擦
详解使用双缓存解决Canvas clearRect引起的闪屏问题
01-19
前言 今天用 canvas 做 H5 的时候遇到了闪屏问题。闪烁效果如下图：   问题简介 功能简介 H5 该部分的功能为：通过点击二级菜单，切换图片的遮罩或者更换背景。 因为功能简单，所以用了原生 canvas 实现这个功能。但在使用 clearRect 清除画布的时候会出现闪烁的情况。 代码实现（问题代码） 以下代码即为出现闪屏的关键代码，省略了图片的定义与 onload： // 点击二级菜单后，触发该函数更新画布 updateCanvas(){ const canvas = document.getElementById('canvas'); // 获取画布 const
canvas清除画布方法
AsBefore麦小兜
07-23 3560
首先：定义画布长宽 data() { return { cWidth: 1000, cHeight: 600, }; }, 1、canvas每当高度或宽度被重设时，画布内容就会被清空 cleanCanves() { let canvas = document.getElementById("myCanves"); ...
ClearCanvas
06-12
C#开源的PACS系统
jq animate()可以使用的属性_Day5 chart基本属性分析
weixin_39963819的博客
11-22 75
属性设置是基于chart实例的，所以我们必须先获取一个chart画板实例，获取方式： G2.Chart。创建 Chart 的方式如下：new G2.Chart({ container: {string} | {HTMLDivElement}, width?: {number}, height?: {number}, padding?: {object} | {number} | {array}, ...
canvas 文字颜色_Canvas基本功能Canvas标签
weixin_39829497的博客
11-21 212
Canvas基本功能在所有的桌面应用程序的开发平台中几乎都有 Canvas 组件。Canvas组件已经成为绘图组件的代名词。Canvas元素本制裁上是在浏览器中提供一块儿可绘制的区域，JavaScript代码可以访问该区域，通过一套完成的API进行二维图像绘制。另外，如果显卡硬件支持3D图形功能，还可以使用Canvas绘制3D图形。本章主要讲解 HTML5 Canvas 的基本功能，利用...
canvas clear 指定属性的元素_canvas 制作画板笔记 （移動桌上版適用）
weixin_36368271的博客
12-04 95
DEMO:canvas-sketch​raymondguo78.github.io学到的知识点：<canvas> 元素<canvas> 是一个替换元素，需要结束标签</canvas>。它只有两个标签：width 和 height，当没有设置宽高，canvas 会默认为宽300px和高150px（使用CSS设置canvas 的宽高会导致画布内容模糊）。the re...
好程序员web前端分享CSS属性组成及作用
weixin_34150224的博客
04-30 86
CSS属性组成及作用学习目标1、css属性和属性值的定义2、css文本属性3、css列表属性4、css背景属性5、css边框属性6、css浮动属性一、css属性和属性值的定义属性：属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性属性值：属性值包括法定属性值及常见的数值加单位，如25px，或颜色值等。二、CSS文本属性1、文本大小：{font-size:12px;}单位还可...
清除canvas画布内容(点擦除+线擦除)
11-20
清空canvas画布内容 1、重置宽或高 由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空：（此方法仅限需要清除全部内容的情况） var c=document.getElementById("myCanvas"); c.width=c.width; 2、clearRect var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(0,0,300,150); ctx.clearRect(20,20,100,5
html5 canvas画图的圆形区域清理
09-19
拓展canvas画图的clearRect()方法，实现圆形区域清理画布
JavaScript html5 canvas画布中删除一个块区域的方法
11-24
本文实例讲述了html5 canvas画布中删除一个块区域的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 附:图中，黑色小方块即为删除掉的块区域 具体代码如下： index.html： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中删除一块区域</title> <style type="text/css"> #canvas { background:black; marg
Krylic.js:受p5js启发的Canvas渲染引擎
04-01
Krylic.jsJavascript渲染引擎JavaScript画布渲染引擎Kryl​​ic.js ... clear ( ) ; k . rect ( 100 , 100 , 100 , 100 , 10 ) ; k . circle ( 100 , 100 , 20 ) ; k . loop ( animate ) ; } animate ( ) ;加载资产 co
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
01-21
具体就是画图的时候做两个canvas层，一个临时层 一个显示层，鼠标的监听事件放在显示层处理， 每次清空的时候只清空临时层，这样就可以解决闪屏问题了。 　部分代码如下： <!--临时层--> <canvas id=...
Canvas清除画布
乾坤我做主的博客
02-29 700
clearRect() 函数指定起始点的x, y 位置以及宽度和高度来清除画布。使用白色背景色简单地填充整个画布，可以清除当前内容。当画布的宽或高被重置时，当前画布内容就会被移除。
canvas clear 指定属性的元素_Canvas的简单介绍
weixin_30855927的博客
12-27 1250
1：基本概念Canvas是HTML5的一个新特性，canvas又叫做画板。顾名思义，我们可以在canvas上绘制我们需要的图形。最开始，canvas它是由苹果公司提出的，当时不叫canvas，叫widget，因为HTML并不存在一套二维的绘图API。Canvas本身是一个HTML元素，需要HTML元素的配合高度和宽度属性而定义出的一块可绘制区域，定义区域之后使用JavaScript的脚本绘制图像的...
lvlg V7 lv_canvas_clear函数的实现
06-09
LVGL V7中的 `lv_canvas_clear()` 函数的实现如下： ```c void lv_canvas_clear(lv_obj_t * canvas, const lv_area_t * area, lv_color_t color) { LV_ASSERT_OBJ(canvas, LV_OBJX_NAME); if(area == NULL) { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值