function createPattern (context) {
let canvas = document.createElement("canvas")
let context2 = canvas.getContext('2d')
canvas.width = 200
canvas.height = 200
let img = new Image()
img.src = "./img/pins_3338674420.jpg"
img.onload = function() {
context2.drawImage(img, 0, 0, 200, 200)
let pattern = context.createPattern(canvas, 'no-repeat')
context.fillStyle = pattern
context.fillRect(0, 0, 500, 500)
context.lineWidth = 1
context.strokeStyle = '#0dd'
context.strokeRect(0, 0, 500, 500)
}
}
context.rect(x,y,width,height)/
context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)
context.clearRect(x,y,width,height)
// x 矩形左上角的 x 坐标
// y 矩形左上角的 y 坐标
// width 矩形的宽度，以像素计
// height 矩形的高度，以像素计
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
// x 圆的中心的 x 坐标。
// y 圆的中心的 y 坐标。
// r 圆的半径。
// sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
// eAngle 结束角，以弧度计。
// counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针(默认)，true = 逆时针。
context.arcTo(x1,y1,x2,y2,r);
// x1 弧的起点的 x 坐标
// y1 弧的起点的 y 坐标
// x2 弧的终点的 x 坐标
// y2 弧的终点的 y 坐标
// r 弧的半径
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
// cp1x 第一个贝塞尔控制点的 x 坐标
// cp1y 第一个贝塞尔控制点的 y 坐标
// cp2x 第二个贝塞尔控制点的 x 坐标
// cp2y 第二个贝塞尔控制点的 y 坐标
// x 结束点的 x 坐标
// y 结束点的 y 坐标
font // 设置或返回文本内容的当前字体属性
textAlign // 设置或返回文本内容的当前对齐方式
textBaseline // 设置或返回在绘制文本时使用的当前文本基线
context.font = "[font-style] [font-variant] [font-weight] [font-size/line-height] [font-family]"
// font-style // 规定字体样式：normal\italic\oblique
// font-variant // 规定字体变体：normal\small-caps
// font-weight // 规定字体的粗细：normal\bold\bolder\lighter\100~900
// font-size/line-height // 规定字号和行高，以像素计。
// font-family // 规定字体系列。
context.textAlign = "center|end|left|right|start"
// 默认。 文本在指定的位置开始。
// end 文本在指定的位置结束。
// center 文本的中心被放置在指定的位置。
// left 文本左对齐。
// right 文本右对齐。
context.textBaseline = "alphabetic|top|hanging|middle|ideographic|bottom"
// alphabetic 默认。文本基线是普通的字母基线。
// top 文本基线是 em 方框的顶端。。
// hanging 文本基线是悬挂基线。
// middle 文本基线是 em 方框的正中。
// ideographic 文本基线是表意基线。
// bottom 文本基线是 em 方框的底端。
fillText() // 在画布上绘制“被填充的”文本
strokeText() // 在画布上绘制文本（无填充）
measureText() // 返回包含指定文本宽度的对象
context.fillText(text,x,y,maxWidth)
context.strokeText(text,x,y,maxWidth)
// text 规定在画布上输出的文本。
// x 开始绘制文本的 x 坐标位置（相对于画布）。
// y 开始绘制文本的 y 坐标位置（相对于画布）。
// maxWidth 可选。允许的最大文本宽度，以像素计。
isPointInPath(x, y)
isPointInPath(x, y, fillRule)
isPointInPath(path, x, y)
isPointInPath(path, x, y, fillRule)
/*
x：检测点的 X 坐标
y：检测点的 Y 坐标
fillRule：用来决定点在路径内还是在路径外的算法，允许的值：
nonzero - 非零环绕规则，默认的规则
evenodd - 奇偶环绕原则
path：Path2D 应用的路径
*/
function roundRect (ctx, x, y, w, h, r) {
var min_size = Math.min(w, h);
if (r > min_size / 2){
r = min_size / 2
}
ctx.beginPath()
ctx.moveTo(x + r, y)
ctx.arcTo(x + w, y, x + w, y + h, r)
ctx.arcTo(x + w, y + h, x, y + h, r)
ctx.arcTo(x, y + h, x, y, r)
ctx.arcTo(x, y, x + w, y, r)
ctx.closePath()
}
function drawRoundImg (ctx, x, y, w, h, r) {
ctx.save();
let img = new Image()
img.src = "./img/pins_3338674420.jpg"
img.onload = function() {
roundRect(ctx, x, y, w, h, r)
ctx.clip();
ctx.drawImage(img, x, y, w, h)
ctx.restore()
}
}
function drawRoundImg2 (ctx, x, y, w, h, r) {
ctx.save();
let img = new Image()
img.src = "./img/pins_3338674420.jpg"
img.onload = function() {
let pattern = ctx.createPattern(img, "no-repeat");
roundRect(ctx, x, y, w, h, r)
ctx.fillStyle = pattern
ctx.fill()
}
}
