Published
Edited
Apr 18, 2018
1 fork
rects = {
const ctx = DOM.context2d(width, height);
function rect1(){
ctx.fillStyle = fill;
ctx.strokeStyle = stroke;
ctx.fillRect(50, 50, 300, 300);
ctx.clearRect(100, 100, 200, 200);
ctx.strokeRect(150, 150, 100, 100);
}
function rect2(){
ctx.rect(400, 50, 300, 300);
ctx.fill();
ctx.stroke();
}
rect1();
rect2();
return ctx.canvas;
}
triangle = {
const ctx = DOM.context2d(width, height);
ctx.strokeStyle = "steel";
ctx.beginPath();
ctx.moveTo(width/2 - 200, 50);
ctx.lineTo(width/2 + 200, 50);
ctx.lineTo(width/2, height-50);
//ctx.closePath();
ctx.fillStyle = fill;
ctx.lineWidth = 3; // 样式声明在绘制之前即能有用，和路径声明代码位置无关
ctx.stroke();
ctx.fill();
return ctx.canvas;
}
badarc = {
const ctx = DOM.context2d(width, height);
const r = Math.min(width, height)/2;
ctx.beginPath(); //在绘制一段路径前使用beginPath()是一个好习惯
ctx.arc(width/2, height/2, r-20,) //总共6个参数，要求至少填入5个参数，否则会报错
return ctx.canvas;
}
arc = {
const ctx = DOM.context2d(width, height);
const r = Math.min(width, height)/2;
ctx.beginPath(); //在绘制一段路径前使用beginPath()是一个好习惯
ctx.arc(width/4, height/2, r-20, 0, Math.PI*3/2, 0); // 0/false表示顺时针，是默认值
ctx.stroke();
ctx.beginPath(); //在绘制一段路径前使用beginPath()是一个好习惯
ctx.arc(width*3/4, height/2, r-20, 0, Math.PI*3/2, 1); // 1/true表示逆时针
ctx.stroke();
return ctx.canvas;
}
text = {
const ctx = DOM.context2d(width, height);
ctx.fillStyle = fill;
ctx.strokeStyle = stroke;
ctx.font = "30px serif";
ctx.beginPath();
ctx.moveTo(100,height/2);
ctx.lineTo(width-100, height/2);
ctx.stroke();
ctx.fillText("Hello,gogogo, 面朝大海，万里黄沙", 100, height/2); // 要求传入至少3个参数，绘制文本不需要额外调用stroke()/fill();
ctx.strokeText("Hello,gogogo, 面朝大海，万里黄沙", 100, height/2, 250); // 传入的最大宽度比需要的宽度小时，会压缩文本；大时，不会拉伸文本
return ctx.canvas;
}
image = {
const ctx = DOM.context2d(width, height);
ctx.fillStyle = fill;
ctx.strokeStyle = stroke;
const img = new Image();
img.src = 'https://joshondesign.com/p/books/canvasdeepdive/images/coords.png';
const r = 420;
// 用这种方式引入图片，是异步操作，所以绘制操作要放在回调函数中
img.onload = function(){
ctx.drawImage(img, 5, 5);
ctx.drawImage(img, 430, 5, 300,200);
ctx.drawImage(img, 0, 0, r, r/2, 740, 5, 400,200);
}
return ctx.canvas;
}
gradient = {
const ctx = DOM.context2d(width, height);
// ctx.createLinearGradient(x1, y1, x2, y2);
const grad = ctx.createLinearGradient(0, 0, 200, 0); // 参数是px值，不能用百分比
grad.addColorStop(0, "skyblue");
grad.addColorStop(0.5, "lightgreen");
grad.addColorStop(1, "orange");
ctx.fillStyle = grad;
ctx.font = "40px serif";
ctx.beginPath();
ctx.fillRect(0,0,500,400);
ctx.fillText("Rect1", 10, 40);
ctx.strokeText("Rect1", 10, 40);
ctx.fillRect(100,100,300,200);
ctx.strokeRect(100,100,300,200);
ctx.fillText("Rect2", 110, 140);
ctx.strokeText("Rect2", 110, 140);
//ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
// 线性渐变不是同心圆时，可以出现各种效果
ctx.save();
ctx.translate(600, 0);
ctx.beginPath();
ctx.fillStyle = "#eee";
ctx.fillRect(0, 0, width-600, height);
let x1 = 100,
y1 = 200,
r1 = 40,
x2 = 240,
y2 = 200,
r2 = 80;
const radialGrad = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2); // 两个圆不是同心圆时的效果有待摸索
radialGrad.addColorStop(0, "skyblue");
radialGrad.addColorStop(0.5, "lightgreen");
radialGrad.addColorStop(1, "orange");
ctx.fillStyle = radialGrad;
ctx.arc(200, 200, 200, 0, Math.PI*2, 0);
ctx.fill();
ctx.stroke();
ctx.beginPath(); //不这样开始新的路径的话，stroke()也会应用到前面的代码上
ctx.arc(x2, y2, r2, 0, Math.PI*2, 0);
ctx.stroke();
ctx.beginPath(); //不这样开始新的路径的话，stroke()也会应用到前面的代码上
ctx.arc(x1, y1, r1, 0, Math.PI*2, 0);
ctx.stroke();
ctx.restore();
return ctx.canvas;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
