Canvas绘图详解_技术笔记

论斤烤 2020-12-02

透明色rgba

截图
0赞 · 0采集
论斤烤 2020-12-02

fillStyle,strokeStyle

截图
0赞 · 0采集
论斤烤 2020-12-02

drawRect2()

截图
0赞 · 0采集
论斤烤 2020-12-02

fillRect()
strokeRect()

截图
0赞 · 0采集
论斤烤 2020-12-02

drawRect()改进

截图
0赞 · 0采集
论斤烤 2020-12-02

cxt.rect

截图
0赞 · 0采集
慕姐8207076 2020-01-15

rgba和hsla的最后一位是不透明度。css中可用的方式，此处都可以用字符串传进去

截图
0赞 · 0采集
慕姐8207076 2020-01-15

cxt.rect(x, y, width, height); 画矩形的API
cxt.fillRect(x, y, width, height);
cxt.strokeRect(x, y, width, height);

截图
0赞 · 0采集
pinzaghi 2019-12-03

rect函数可以绘制矩形，传入左上角坐标和宽高

截图
0赞 · 0采集
慕码人8705899 2019-01-18

fillStyle strokeStyle 颜色值的写法：
#fff;
#643;
rgb(255,128,0)
rgba(100,100,100,0.8);
hsl(20,62%,28%)
hsla(40,82%,33%,0.6)
red

截图
0赞 · 0采集
慕码人8705899 2019-01-18

context.fillRect(x,y,width,height);将直接用当前定义的填充色绘制一个矩形；
context.strokeRect(x,y,width,height);将直接用当前定义的描边色绘制一个矩形；

截图
0赞 · 0采集
慕码人8705899 2019-01-18

context.rect(x,y,width,height);快速绘制矩形

截图
0赞 · 0采集
慕移动6371110 2019-01-12

canvas contex颜色

截图
0赞 · 0采集
lemons3205542 2018-10-15

笔记记录 - 4

截图
0赞 · 0采集
lemons3205542 2018-10-15

笔记记录 - 3

截图
0赞 · 0采集

23568 2018-10-11

绘制矩形api：

ctx.beginPath();
ctx.rect(x, y, width, height);
ctx.closePath();
ctx.stroke();

ctx.fillRect(x, y, width, height);

ctx.strokeRect(x, y, width, height);

fillStyle 和 strokeStyle 支持所有CSS支持的颜色表示。

0赞 · 0采集

Ungalo 2018-08-05

context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)矩形左上角坐标和长宽
表示颜色的方式

0赞 · 0采集
慕运维9164912 2018-07-21

绘制矩形：cxt.rect(x,y,width,height）左上角的横纵坐标、矩形的宽和高
cxt.fillRect(x,y,width,height)
cxt.strokeRect(x,y,width,height)

0赞 · 0采集
慕用6095593 2018-06-13

fillStyle,strokeStyle 只要是css支持的颜色值；就可以以字符串的形式赋值

截图
0赞 · 0采集
xxy流沙 2018-04-22

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>矩形</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid black;display: block;margin:10px auto;"></canvas>
<script type="text/javascript">
    window.onload=function(){
      var c=document.getElementById("canvas");
      c.width=1024;
      c.height=500;
      var context=c.getContext("2d");
     drawRect(context,100,100,200,200,10,"#058","red");
     drawRect2(context,200,200,200,200,10,"#058","rgba(0,256,0,0.5)");
    }
    function drawRect(ctx,x,y,width,height,borderWidth,borderColor,fillColor){
       ctx.beginPath();//开始绘制新路径
       ctx.rect(x,y,width,height);//矩形绘制，省去了路径绘制
       ctx.closePath();//结束路径，具有自动补全的作用

       ctx.lineWidth=borderWidth;//描边的粗细
       ctx.fillStyle=fillColor;//所要填充的颜色
       ctx.strokeStyle=borderColor;//描边的颜色

       ctx.fill();//填充颜色，要先填充再描边，这样描边的颜色就不会被填充的颜色所覆盖；
       ctx.stroke();//描边
    }

    function drawRect2(ctx,x,y,width,height,borderWidth,borderColor,fillColor){
      ctx.beginPath();//开始绘制新路径
      ctx.rect(x,y,width,height);
      ctx.closePath();//结束路径，具有自动补全的作用

     ctx.lineWidth=borderWidth;//描边的粗细
     ctx.fillStyle=fillColor;//所要填充的颜色
     ctx.strokeStyle=borderColor;//描边的颜色

     ctx.fillRect(x,y,width,height);//
     ctx.strokeRect(x,y,width,height);
    }
</script>
</body>
</html>

0赞 · 0采集
左小珍 2018-01-23

颜色的几种表示方法

截图
0赞 · 0采集
左小珍 2018-01-23

Canvas绘图详解 2-5 矩形覆盖和透明色 ctx.rect(x,y,width,height) ctx.fillRect(x,y,width,height) ctx.strokeRect(x,y,width,height) 后绘制的图形如果和前绘制的图形发生重叠的画，后绘制的图形会遮挡前绘制的图形

截图
0赞 · 0采集
左小珍 2018-01-23

Canvas绘图详解 2-5 矩形覆盖和透明色 ctx.rect(x,y,width,height) ctx.fillRect(x,y,width,height) ctx.strokeRect(x,y,width,height)

截图
0赞 · 0采集
LittleBocchi 2017-11-29

CSS 合法颜色值十六进制颜色 RGB颜色 RGBA颜色 HSL色彩 HSLA颜色预定义/跨浏览器的颜色名称

截图
0赞 · 0采集
12344554 2017-10-09

fillStyle

截图
0赞 · 0采集
qq_简单点_14 2017-09-14

绘制矩形 rect();//绘制路径 strokeRect();绘制形状 fillRect(); clearRect();

0赞 · 1采集
慕妹0041164 2017-09-02

颜色的表示形式

截图
0赞 · 0采集
高阶攻城师 2017-08-03

矩形函数

截图
0赞 · 0采集
New_Name 2017-03-10

如果绘制的图形在区域发生重叠的话，那么后面绘制的图形会遮挡前面绘制的图形

截图
0赞 · 0采集
New_Name 2017-03-10

fillRect绘制出一个填充的矩形 strokeRect绘制出矩形的边框

截图
0赞 · 0采集

数据加载中...