Skip to content

Feature/assistance #1

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 5 additions & 3 deletions final/css.css
Expand Up @@ -6,7 +6,8 @@ body{
min-width:18vw;
color:white;
background-color:rgba(0,0,0,.75);
margin-left:75vw;
top:0px;
right: 0px;
text-align:center;
z-index:1;
}
Expand Down Expand Up @@ -41,8 +42,9 @@ body{
bottom:0;
left:0;
right:0;
min-width:100%;
min-height: 100%;
width: 100%;
/* min-width:100vw; */
min-height: 100vh;
/* z-index:-1; */
}
#bianDang{
Expand Down
64 changes: 57 additions & 7 deletions final/js/canvas.js
@@ -1,5 +1,24 @@
var canvas =document.getElementById("canvas");
var ctx =canvas.getContext("2d");
var ctx = setupCanvas(canvas);

/** Creates a HiDPI Canvas
* @url https://www.html5rocks.com/en/tutorials/canvas/hidpi/
*/
function setupCanvas(canvas) {
// Get the device pixel ratio, falling back to 1.
var dpr = window.devicePixelRatio || 1;
// Get the size of the canvas in CSS pixels.
var rect = canvas.getBoundingClientRect();
// Give the canvas pixel dimensions of their CSS
// size * the device pixel ratio.
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
var ctx = canvas.getContext('2d');
// Scale all drawing operations by the dpr, so you
// don't have to worry about the difference.
ctx.scale(dpr, dpr);
return ctx;
}

//common setting
// var alpha=1;
Expand All @@ -12,12 +31,7 @@ var ctx =canvas.getContext("2d");
// ctx.shadowBlur=4;
// ctx.fillText('Bian Dang',canvas.width/2,canvas.height/2);

ctx.font = '35px Kalam';
ctx.textAlign='center';
ctx.shadowOffsetX=3;
ctx.shadowOffsetY=3;
ctx.shadowColor='rgba(0,0,0,0.1)';
ctx.shadowBlur=4;


//fadeIn function1
// function fadeIn(){
Expand All @@ -39,6 +53,12 @@ var i=0;
var a=5;

function fadeIn(){
ctx.font = '50px Kalam';
ctx.textAlign='center';
ctx.shadowOffsetX=3;
ctx.shadowOffsetY=3;
ctx.shadowColor='rgba(0,0,0,0.1)';
ctx.shadowBlur=4;
ctx.fillStyle=`rgba(255,255,255,${i})`;
i=i+0.01;
ctx.fillText('Bian Dang',canvas.width/2,canvas.height/2)
Expand All @@ -62,3 +82,33 @@ function openAnimate(){
bianDang.addEventListener('click',openAnimate)




/**
* Add Images
*/
window.addEventListener('load', ()=>{
// Split canvas into 3 pieces
let imgWidth = canvas.width / 3;

// First image
let img1 = new Image();
img1.addEventListener('load', (event) =>{
ctx.drawImage(img1, imgWidth * 0, 0, imgWidth, 200);
});
img1.src = 'https://via.placeholder.com/300.png/0000FF/808080/O%20https://placeholder.com/';

// Second Image
let img2 = new Image();
img2.addEventListener('load', (event) =>{
ctx.drawImage(img2, imgWidth * 1, 0, imgWidth, 200);
});
img2.src = 'https://via.placeholder.com/300.png/FF0000/FFFFFF/O%20https://placeholder.com/';

// Third Image
let img3 = new Image();
img3.addEventListener('load', (event) =>{
ctx.drawImage(img3, imgWidth * 2, 0, imgWidth, 200);
});
img3.src = 'https://via.placeholder.com/300.png/09f/fff%20C/O%20https://placeholder.com/';
});