https://github.com/xlisp/jimw-css-svg-canvas-compare-learning
https://github.com/xlisp/jimw-css-svg-canvas-compare-learning
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/xlisp/jimw-css-svg-canvas-compare-learning
- Owner: xlisp
- Created: 2019-10-01T06:27:44.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-10-01T07:17:50.000Z (about 6 years ago)
- Last Synced: 2025-05-15T17:14:32.165Z (6 months ago)
- Size: 1.95 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [Canvas与SVG与CSS画图对比学习](https://shanyue.tech/post/canvas-and-svg-shapes.html)
### 描边与填充
```css
;; 在 CSS 中是 border-color 以及 background-color 属性
.rect {
border: 1px solid #fff;
background-color: #000;
width: 100px;
height: 100px;
}
```
```html
```
```js
const canvas = document.getElementById('rect')
const ctx = canvas.getContext('2d')
ctx.fillStyle = '#000'
ctx.strokeStyle = '#fff'
ctx.fillRect(0, 0, 100, 100)
ctx.fillRect(115, 0, 100, 100)
```
### 矩形
```css
.rect {
width: 100px;
height: 100px;
border-radius: 15px;
}
```
```html
```
```js
const canvas = document.getElementById('rect')
const ctx = canvas.getContext('2d')
ctx.fillRect(0, 0, 100, 100)
ctx.fillRect(115, 0, 100, 100)
```
## 多个图片合成
* canvas(用函数来描述css"herb",不断复用它,是学习css最快的方式 => canvas的λ化,用无穷多个小的函数来描述canvas,最后组合演算)
```clojure
;; 
[:canvas#myCanvas {:width "300" :height "300"
:style {:border "1px solid #d3d3d3"}}
"您的浏览器不支持canvas"]
(defn get-canvas []
(let [c (.getElementById js/document "myCanvas")]
(.getContext c "2d")))
(defn add-background []
(let [ctx (get-canvas)
img (.getElementById js/document "scream")]
;; 0,0代表插入的位置坐标,在左上角开始算
(.drawImage ctx img 0 0)))
(let [ctx (get-canvas)
img (.getElementById js/document "coverimage")]
(.drawImage ctx img 0 0))
(add-background)
```
## 任意路径或者多边形
```js
Facebook: {
type: 'custom', customClassName: 'IT-Facebook', dataBboxX: 0, dataBboxY: 0, dataBboxW: 55, dataBboxH: 55, dataCX: 56/2, dataCY: 56/2,
components: [
{tag: 'path', attributes: {d: "M48.13 0H6.88A6.88 6.88 0 0 0 0 6.88v41.25A6.88 6.88 0 0 0 6.88 55h41.25A6.88 6.88 0 0 0 55 48.13V6.88A6.88 6.88 0 0 0 48.13 0z", fill:"#1976d2"}},
{tag: 'path', attributes: {d: "M46.41 27.5h-8.6v-6.87c0-1.9 1.54-1.72 3.44-1.72h3.44v-8.6h-6.88A10.31 10.31 0 0 0 27.5 20.63v6.87h-6.87v8.59h6.87V55h10.31V36.09H43z", fill: "#fafafa"}},
]
},
```