13 繪製矩形的簡寫方式

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>13-canvas繪製矩形
title
>
6<
style
>7*
11canvas
16style
>
17head
>
18<
body
>
19<
canvas 
width
="300"
height
="300"
>
canvas
>
20<
script
>
21//
1.拿到canvas
22let ocanvas 
=document.queryselector(
"canvas");
23//
2.從canvas中拿到繪圖工具
24let octx 
=ocanvas.getcontext("2d
");25/*
26octx.moveto(100, 100);
27octx.lineto(300, 100);
28octx.lineto(300, 300);
29octx.lineto(100, 300);
30octx.closepath();
31// octx.stroke();
32octx.fill();
33*/
34/*
35octx.moveto(100, 100);
36octx.lineto(300, 100);
37octx.linewidth = 200;
38octx.stroke();
39*/
40/*
41第乙個引數: x的座標
42第二個引數: y的座標
43第三個引數: 矩形的寬度
44第四個引數: 矩形的高度
45* 
*/46
47//
octx.rect(100, 100, 200, 200);
48//
octx.stroke();
49//
octx.fill();
5051
52//
octx.rect(150, 150, 100, 100);
53//
octx.strokestyle = "blue";
54//
octx.stroke();
5556
//簡寫形式
57//
octx.strokerect(100, 100, 200, 200);
5859
= "blue";
60//
octx.strokerect(150, 150, 100, 100);
6162
63//
octx.fillrect(100, 100, 200, 200);
6465
= "blue";
66//
octx.fillrect(150, 150, 100, 100);
67//
清除某個矩形地區的東西
68//
octx.clearrect(0, 0, 150, 150);
69//
清除整個畫板
70let canvaswidth 
=octx.canvas.width;
71let canvasheight 
=octx.canvas.height;
72octx.clearrect(0, 
0, canvaswidth, canvasheight);
73script
>
74body
>
75html
>

iOS 繪製直線 矩形 文字的方式

首先，獲取上下文 cgcontextref context uigraphicsgetcurrentcontext 畫線 設定畫筆線條粗細 cgcontextsetlinewidth context,5.0 設定線條樣式 cgcontextsetlinecap context,kcglinecapb...

canvas繪製矩形和路徑方式

一 繪製矩形 1.context.rect x,y,width,height 2.context.fillrect x,y,width,height 3.context.strokerect x,y,width,height 4.context.clearrect x,y,width,height ...

關於繪製圓角矩形的方式 api 21 以下

在api 21開始可以使用drawroundrect實現圓角矩形,但是在底於這個版本的系統中怎麼繪製呢?我想過一種使用乙個半圓與矩形拼接的方式,但在有的系統中,兩個圖總不能完美的連線,因為要與父容器背景透明疊加 兩個拼接處如果沒有座標偏移 連續繪製 則會出現疊加,顏色變深,估計是因為有抗鋸齒的處理導...