Lines Matching refs:this
60 this.el = this.$refs.canvas1;
61 this.ctx = this.el.getContext("2d",{antialias: true});
63 this.ctx.clearRect(0, 0, 600, 500);
65 this.ctx.beginPath();
67 this.ctx.lineCap = 'butt';
69 this.ctx.lineWidth = 15;
71 this.ctx.beginPath();
73 this.ctx.moveTo(200, 100);
75 this.ctx.lineTo(400, 100);
77 this.ctx.stroke();
78 this.ctx.beginPath();
80 this.ctx.lineCap = 'round';
81 this.ctx.moveTo(200, 200);
82 this.ctx.lineTo(400, 200);
83 this.ctx.stroke();
85 this.ctx.beginPath();
86 this.ctx.lineCap = 'square';
87 this.ctx.moveTo(200, 300);
88 this.ctx.lineTo(400, 300);
89 this.ctx.stroke();
93 this.el = this.$refs.canvas1;
94 this.ctx = this.el.getContext("2d",{antialias: true});
95 this.ctx.clearRect(0, 0, 600, 500);
97 this.ctx.beginPath();
98 this.ctx.lineCap = 'butt';
99 this.ctx.moveTo(200, 100);
100 this.ctx.lineTo(400, 100);
101 this.ctx.stroke();
103 this.ctx.beginPath();
104 this.ctx.lineCap = 'round';
105 this.ctx.moveTo(200, 200);
106 this.ctx.lineTo(400, 200);
107 this.ctx.stroke();
109 this.ctx.beginPath();
110 this.ctx.lineCap = 'square';
111 this.ctx.moveTo(200, 300);
112 this.ctx.lineTo(400, 300);
113 this.ctx.stroke();
115 this.ctx.clearRect(0, 0, 600, 500);
117 this.ctx.beginPath();
118 this.ctx.moveTo(100, 150);
120 this.ctx.quadraticCurveTo(300, 50, 500, 150);
121 this.ctx.stroke();
123 this.ctx.beginPath();
124 this.ctx.moveTo(200, 150);
125 this.ctx.quadraticCurveTo(250, 250, 250, 400);
126 this.ctx.stroke();
128 this.ctx.beginPath();
129 this.ctx.moveTo(400, 150);
130 this.ctx.quadraticCurveTo(350, 250, 350, 400);
131 this.ctx.stroke();
133 this.ctx.clearRect(0, 0, 600, 500);
135 this.ctx.beginPath();
136 this.ctx.moveTo(100, 200);
138 this.ctx.bezierCurveTo(150, 100, 200, 100,250, 200);
139 this.ctx.stroke();
141 this.ctx.beginPath();
142 this.ctx.moveTo(350, 200);
143 this.ctx.bezierCurveTo(400, 100, 450, 100,500, 200);
144 this.ctx.stroke();
146 this.ctx.beginPath();
147 this.ctx.moveTo(200, 350);
148 this.ctx.bezierCurveTo(250, 500, 350, 500, 400, 350);
149 this.ctx.stroke();
151 this.ctx.clearRect(0, 0, 600, 500);
152 this.ctx.beginPath();
153 this.ctx.moveTo(100, 200);
155 this.ctx.arcTo(150, 300, 350, 300, 150);
156 this.ctx.stroke();
157 this.ctx.beginPath();
159 this.ctx.ellipse(400, 250, 50, 100, Math.PI * 0.25, Math.PI * 0.5 , Math.PI , 1);
160 this.ctx.stroke();
162 this.ctx.clearRect(0, 0, 600, 500);
164 this.ctx.beginPath();
166 this.ctx.lineJoin = 'round';
167 this.ctx.moveTo(100, 100);
168 this.ctx.lineTo(200, 200);
169 this.ctx.lineTo(100, 250);
170 this.ctx.stroke();
172 this.ctx.beginPath();
174 this.ctx.lineJoin = 'bevel';
175 this.ctx.moveTo(100, 300);
176 this.ctx.lineTo(200, 400);
177 this.ctx.lineTo(100, 450);
178 this.ctx.stroke();
180 this.ctx.beginPath();
182 this.ctx.lineJoin = 'miter';
183 this.ctx.miterLimit = 3;
184 this.ctx.moveTo(400, 100);
185 this.ctx.lineTo(450, 200);
186 this.ctx.lineTo(400, 250);
188 this.ctx.closePath();
189 this.ctx.stroke();
191 this.ctx.beginPath();
192 this.ctx.lineJoin = 'miter';
193 this.ctx.miterLimit = 10;
194 this.ctx.moveTo(400, 300);
195 this.ctx.lineTo(450, 400);
196 this.ctx.lineTo(400, 450);
197 this.ctx.closePath();
198 this.ctx.stroke();
256 this.el = this.$refs.canvas1;
257 this.ctx = this.el.getContext("2d",{antialias: true});
258 this.ctx.lineWidth = 5;
259 this.ctx.strokeRect(200, 150, 200, 200);
264 this.ctx.clearRect(0,0,600,500);
266 this.ctx.lineWidth = 5;
268 this.ctx.strokeStyle = '#110000';
270 this.ctx.setLineDash([0,0]);
272 this.ctx.strokeRect(200, 150, 200, 200);
274 this.ctx.clearRect(0,0,600,500);
275 this.ctx.lineWidth = 30;
276 this.ctx.strokeStyle = '#0000ff';
277 this.ctx.setLineDash([0,0]);
279 this.ctx.arc(300, 250, 150,0,6.28);
281 this.ctx.stroke();
283 this.ctx.clearRect(0,0,600,500);
284 this.ctx.lineWidth = 5;
285 this.ctx.setLineDash([5,5]);
286 this.ctx.strokeRect(200, 150, 200, 200);
288 this.ctx.clearRect(0,0,600,500);
290 this.ctx.fillStyle = '#0000ff';
291 this.ctx.fillRect(200, 150, 200, 200);
353 this.el = this.$refs.canvas1;
354 this.ctx = this.el.getContext("2d",{antialias: true});
356 let gradient = this.ctx.createLinearGradient(100,100, 400,300);
362 this.ctx.fillStyle = gradient;
363 this.ctx.fillRect(100, 100, 400, 300);
368 this.ctx.clearRect(0,0,600,500);
369 let gradient = this.ctx.createLinearGradient(100,100, 400,300);
373 this.ctx.fillStyle = gradient;
375 this.ctx.shadowBlur = 0;
377 this.ctx.shadowOffsetY = 0;
379 this.ctx.shadowOffsetX = 0;
380 this.ctx.fillRect(100, 100, 400, 300);
382 this.ctx.clearRect(0,0,600,500);
384 let gradient = this.ctx.createRadialGradient(300,250,20,300,250,100);
388 this.ctx.shadowBlur = 0;
389 this.ctx.shadowOffsetY = 0;
390 this.ctx.shadowOffsetX = 0;
391 this.ctx.fillStyle = gradient;
392 this.ctx.fillRect(100, 100, 400, 300);
394 this.ctx.clearRect(0,0,600,500);
395 let gradient = this.ctx.createLinearGradient(100,100, 400,400);
400 this.ctx.shadowBlur = 30;
402 this.ctx.shadowColor = 'rgb(229, 16, 16)';
403 this.ctx.fillStyle = gradient;
404 this.ctx.fillRect(100, 100, 400, 300);
406 this.ctx.clearRect(0,0,600,500);
407 this.ctx.clearRect(0,0,600,500);
408 let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200);
413 this.ctx.shadowBlur = 30;
414 this.ctx.shadowOffsetY = 30;
416 this.ctx.shadowColor = 'rgb(23, 1, 1)';
417 this.ctx.fillStyle = gradient;
418 this.ctx.fillRect(100, 100, 400, 300);
478 this.el = this.$refs.canvas1;
479 this.ctx = this.el.getContext("2d",{antialias: true});
483 this.ctx.font = '30px';
484 this.ctx.fillText("with:"+this.ctx.measureText(text).width, 200, 300);
486 this.ctx.fillText(text, 200, 250);
491 this.ctx.clearRect(0,0,600,500);
493 this.ctx.beginPath();
495 this.ctx.textAlign = 'left';
497 this.ctx.textBaseline = 'alphabetic';
499 this.ctx.font = '30px';
502 this.ctx.fillText("with:"+this.ctx.measureText(text).width, 200, 300);
504 this.ctx.fillText(text, 200, 250);
506 this.ctx.clearRect(0,0,600,500);
507 this.ctx.beginPath();
509 this.ctx.globalAlpha = 0.1;
511 this.ctx.lineWidth = 10;
513 this.ctx.strokeStyle = '#0000ff';
515 this.ctx.moveTo(0, 240);
517 this.ctx.lineTo(600, 240);
518 this.ctx.stroke();
519 this.ctx.font = '35px';
520 this.ctx.globalAlpha = 1;
522 this.ctx.textAlign = 'left';
524 this.ctx.textBaseline = 'top';
525 this.ctx.fillText('Top', 50, 240);
526 this.ctx.textBaseline = 'bottom';
527 this.ctx.fillText('Bottom', 200, 240);
528 this.ctx.textBaseline = 'middle';
529 this.ctx.fillText('Middle', 400, 240);
532 this.ctx.clearRect(0,0,600,500);
533 this.ctx.beginPath();
534 this.ctx.globalAlpha = 0.1;
535 this.ctx.lineWidth = 10;
536 this.ctx.strokeStyle = '#0000ff';
537 this.ctx.moveTo(300, 0);
538 this.ctx.lineTo(300, 500);
539 this.ctx.stroke();
540 this.ctx.font = '35px';
541 this.ctx.globalAlpha = 1;
543 this.ctx.textBaseline = 'alphabetic';
545 this.ctx.textAlign = 'left';
546 this.ctx.fillText('textAlign=left',300, 100);
547 this.ctx.textAlign = 'center';
548 this.ctx.fillText('textAlign=center',300, 250);
549 this.ctx.textAlign = 'right';
550 this.ctx.fillText('textAlign=right',300, 400);
634 let ctx = this.$refs.canvas0.getContext("2d");
649 let ctx = this.$refs.canvas1.getContext("2d");
651 if(this.compositeOperation == "source-over"){
652 this.compositeOperation = "destination-over";
654 this.compositeOperation = "source-over";
656 ctx.globalCompositeOperation = this.compositeOperation;
675 let ctx = this.$refs.canvas2.getContext("2d");
686 let ctx = this.$refs.canvas3.getContext("2d");
697 let ctx = this.$refs.canvas4.getContext("2d");
707 let ctx = this.$refs.canvas5.getContext("2d");
717 let ctx = this.$refs.canvas6.getContext("2d");
804 this.ctx = this.$refs.canvas.getContext("2d");
805 this.ctx.fillStyle = "red"
806 this.ctx.fillRect(200, 150, 200, 200);
810 this.ctx.save();
814 this.ctx.clearRect(0,0,600,500);
816 this.ctx.fillStyle = "#2133d2";
819 this.ctx.beginPath();
821 this.ctx.restore();
822 this.ctx.fillRect(200, 150, 200, 200);