Lines Matching refs:ctx
57 ctx: null,
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();
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();
209 Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle with the border wid…
259 ctx: null,
263 this.ctx = this.el.getContext("2d",{antialias: true});
264 this.ctx.lineWidth = 5;
265 this.ctx.strokeRect(200, 150, 200, 200);
270 this.ctx.clearRect(0,0,600,500);
272 this.ctx.lineWidth = 5;
274 this.ctx.strokeStyle = '#110000';
276 this.ctx.setLineDash([0,0]);
278 this.ctx.strokeRect(200, 150, 200, 200);
280 this.ctx.clearRect(0,0,600,500);
281 this.ctx.lineWidth = 30;
282 this.ctx.strokeStyle = '#0000ff';
283 this.ctx.setLineDash([0,0]);
285 this.ctx.arc(300, 250, 150,0,6.28);
287 this.ctx.stroke();
289 this.ctx.clearRect(0,0,600,500);
290 this.ctx.lineWidth = 5;
291 this.ctx.setLineDash([5,5]);
292 this.ctx.strokeRect(200, 150, 200, 200);
294 this.ctx.clearRect(0,0,600,500);
296 this.ctx.fillStyle = '#0000ff';
297 this.ctx.fillRect(200, 150, 200, 200);
356 ctx: null,
360 this.ctx = this.el.getContext("2d",{antialias: true});
362 let gradient = this.ctx.createLinearGradient(100,100, 400,300);
368 this.ctx.fillStyle = gradient;
369 this.ctx.fillRect(100, 100, 400, 300);
374 this.ctx.clearRect(0,0,600,500);
375 let gradient = this.ctx.createLinearGradient(100,100, 400,300);
379 this.ctx.fillStyle = gradient;
381 this.ctx.shadowBlur = 0;
383 this.ctx.shadowOffsetY = 0;
385 this.ctx.shadowOffsetX = 0;
386 this.ctx.fillRect(100, 100, 400, 300);
388 this.ctx.clearRect(0,0,600,500);
390 let gradient = this.ctx.createRadialGradient(300,250,20,300,250,100);
394 this.ctx.shadowBlur = 0;
395 this.ctx.shadowOffsetY = 0;
396 this.ctx.shadowOffsetX = 0;
397 this.ctx.fillStyle = gradient;
398 this.ctx.fillRect(100, 100, 400, 300);
400 this.ctx.clearRect(0,0,600,500);
401 let gradient = this.ctx.createLinearGradient(100,100, 400,400);
406 this.ctx.shadowBlur = 30;
408 this.ctx.shadowColor = 'rgb(229, 16, 16)';
409 this.ctx.fillStyle = gradient;
410 this.ctx.fillRect(100, 100, 400, 300);
412 this.ctx.clearRect(0,0,600,500);
413 this.ctx.clearRect(0,0,600,500);
414 let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200);
419 this.ctx.shadowBlur = 30;
420 this.ctx.shadowOffsetY = 30;
422 this.ctx.shadowColor = 'rgb(23, 1, 1)';
423 this.ctx.fillStyle = gradient;
424 this.ctx.fillRect(100, 100, 400, 300);
481 ctx: null,
485 this.ctx = this.el.getContext("2d",{antialias: true});
489 this.ctx.font = '30px';
490 this.ctx.fillText("with:"+this.ctx.measureText(text).width, 200, 300);
492 this.ctx.fillText(text, 200, 250);
497 this.ctx.clearRect(0,0,600,500);
499 this.ctx.beginPath();
501 this.ctx.textAlign = 'left';
503 this.ctx.textBaseline = 'alphabetic';
505 this.ctx.font = '30px';
508 this.ctx.fillText("with:"+this.ctx.measureText(text).width, 200, 300);
510 this.ctx.fillText(text, 200, 250);
512 this.ctx.clearRect(0,0,600,500);
513 this.ctx.beginPath();
515 this.ctx.globalAlpha = 0.1;
517 this.ctx.lineWidth = 10;
519 this.ctx.strokeStyle = '#0000ff';
521 this.ctx.moveTo(0, 240);
523 this.ctx.lineTo(600, 240);
524 this.ctx.stroke();
525 this.ctx.font = '35px';
526 this.ctx.globalAlpha = 1;
528 this.ctx.textAlign = 'left';
530 this.ctx.textBaseline = 'top';
531 this.ctx.fillText('Top', 50, 240);
532 this.ctx.textBaseline = 'bottom';
533 this.ctx.fillText('Bottom', 200, 240);
534 this.ctx.textBaseline = 'middle';
535 this.ctx.fillText('Middle', 400, 240);
538 this.ctx.clearRect(0,0,600,500);
539 this.ctx.beginPath();
540 this.ctx.globalAlpha = 0.1;
541 this.ctx.lineWidth = 10;
542 this.ctx.strokeStyle = '#0000ff';
543 this.ctx.moveTo(300, 0);
544 this.ctx.lineTo(300, 500);
545 this.ctx.stroke();
546 this.ctx.font = '35px';
547 this.ctx.globalAlpha = 1;
549 this.ctx.textBaseline = 'alphabetic';
551 this.ctx.textAlign = 'left';
552 this.ctx.fillText('textAlign=left',300, 100);
553 this.ctx.textAlign = 'center';
554 this.ctx.fillText('textAlign=center',300, 250);
555 this.ctx.textAlign = 'right';
556 this.ctx.fillText('textAlign=right',300, 400);
640 let ctx = this.$refs.canvas0.getContext("2d");
650 var pat = ctx.createPattern(img, 'repeat');ctx.fillStyle = pat;
651 ctx.fillRect(0, 0, 600, 300);
655 let ctx = this.$refs.canvas1.getContext("2d");
656 ctx.clearRect(0,0,600,1000);
662 ctx.globalCompositeOperation = this.compositeOperation;
667 ctx.drawImage(img, 150, 20, 200, 200);
673 ctx.drawImage(img1, 250, 80, 200, 200);
681 let ctx = this.$refs.canvas2.getContext("2d");
682 ctx.clearRect(0,0,600,300);
684 ctx.rotate(10 * Math.PI / 180);
688 ctx.drawImage(img, 300, 0, 100, 100);
692 let ctx = this.$refs.canvas3.getContext("2d");
693 ctx.clearRect(0,0,600,200);
695 ctx.scale(1.3,1.2);
699 ctx.drawImage(img, 0, 0, 50, 50);
703 let ctx = this.$refs.canvas4.getContext("2d");
704 ctx.clearRect(0,0,600,300);
705 ctx.translate(10,0);
709 ctx.drawImage(img, 0, 50, 300, 200);
713 let ctx = this.$refs.canvas5.getContext("2d");
714 ctx.clearRect(0,0,600,300);
715 ctx.transform(1.1, 0.1, 0.1, 1, 10, 0);
719 ctx.drawImage(img, 0, 50, 100, 100);
723 let ctx = this.$refs.canvas6.getContext("2d");
724 ctx.clearRect(0,0,600,300);
725 ctx.setTransform(1.1, 0.1, 0.1, 1, 10, 0);
729 ctx.drawImage(img, 0, 50, 100, 100);
807 ctx: '',
810 this.ctx = this.$refs.canvas.getContext("2d");
811 this.ctx.fillStyle = "red"
812 this.ctx.fillRect(200, 150, 200, 200);
816 this.ctx.save();
820 this.ctx.clearRect(0,0,600,500);
822 this.ctx.fillStyle = "#2133d2";
825 this.ctx.beginPath();
827 this.ctx.restore();
828 this.ctx.fillRect(200, 150, 200, 200);