{"id":997,"date":"2019-11-27T16:29:12","date_gmt":"2019-11-27T15:29:12","guid":{"rendered":"http:\/\/labodemaths.fr\/WordPress3\/?p=997"},"modified":"2019-11-27T18:23:04","modified_gmt":"2019-11-27T17:23:04","slug":"isn-quelques-petits-coups-de-main","status":"publish","type":"post","link":"https:\/\/labodemaths.fr\/WordPress3\/isn-quelques-petits-coups-de-main\/","title":{"rendered":"ISN: quelques petits coups de main"},"content":{"rendered":"\n

1. Mettre une image en background d’un canvas.<\/h3>\n\n\n\n

Il suffit d’utiliser un peu de css, par exemple :<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"fr\" >\n<link rel=\"stylesheet\" href=\"style\/style.css\">\n<head>\n  <meta charset=\"UTF-8\">\n<\/head>\n<body >\n<canvas id=\"espace_de_dessin\"><\/canvas>\n<\/body>\n<script src=\"js\/script.js\"><\/script>\n<\/html>\n<\/code><\/pre>\n\n\n\n
et en css<\/p>\n\n\n\n
#espace_de_dessin {\n\/* on indique le chemin relatif vers l'image *\/\n  background-image: url(\"monimage.png\");\n\/* On centre *\/\n  background-position: center top; \n\/* on ne r\u00e9p\u00e8te pas *\/\n  background-repeat: no-repeat; \n\/* On adapte la taille pour couvrir le canvas *\/\n  background-size: cover; \n\/* on fixe les dimensions du canvas *\/\n  height: 200px; \n  width: 400px;\n}<\/code><\/pre>\n\n\n\n
2. Ins\u00e9rer une image \u00e0 une certaine position dans un canvas<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"fr\" >\n<link rel=\"stylesheet\" href=\"style.css\">\n<head>\n  <meta charset=\"UTF-8\">\n<\/head>\n<body >\n<canvas id=\"canvas\" width=\"600\" height=\"600\"><\/canvas>\n<\/body>\n<script src=\"prog.js\"><\/script>\n<\/html><\/code><\/pre>\n\n\n\n
en js :<\/p>\n\n\n\n
\/\/ on d\u00e9finit ctx comme espace de dessin 2d pour le 1\u00b0 canvas\nvar ctx = document.getElementById('canvas').getContext('2d');\n \/\/ on d\u00e9finit un objet image\n  var img = new Image();\n\/\/ on d\u00e9finit le lien source de l'image\n  img.src = 'steve.jpg';\n    \/\/ on attend que l'image soit charg\u00e9e pour la dessine dans le canvas\n    img.onload = function() {\n    ctx.drawImage(img,0,0,150,150,50,50,150,150);\n    }<\/code><\/pre>\n\n\n\n
Pour en savoir plus sur les param\u00e8tres de drawImage :
https:\/\/developer.mozilla.org\/fr\/docs\/Web\/API\/CanvasRenderingContext2D\/drawImage<\/a><\/p>\n\n\n\n
3. Pour structurer des donn\u00e9es : recettes de cuisine, donn\u00e9es touristiques ….<\/h3>\n\n\n\n
Le JSON est un format parfaitement adapt\u00e9 \u00e0 la gestion des donn\u00e9es en js :<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"fr\" >\n<link rel=\"stylesheet\" href=\"style.css\">\n<head>\n  <meta charset=\"UTF-8\">\n    <script src=\"structure_donnee.js\"><\/script>\n<\/head>\n<body >\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
var donnee={\n  \"equipe\": \"Super hero squad\",\n  \"ville\": \"Metro City\",\n  \"membres\": [\n    {\n      \"name\": \"Molecule Man\",\n      \"age\": 29,\n      \"secretIdentity\": \"Dan Jukes\",\n      \"powers\": [\n        \"Radiation resistance\",\n        \"Turning tiny\",\n        \"Radiation blast\"\n      ]\n    },\n    {\n      \"name\": \"Madame Uppercut\",\n      \"age\": 39,\n      \"secretIdentity\": \"Jane Wilson\",\n      \"powers\": [\n        \"Million tonne punch\",\n        \"Damage resistance\",\n        \"Superhuman reflexes\"\n      ]\n    },\n    {\n      \"name\": \"Eternal Flame\",\n      \"age\": 1000000,\n      \"secretIdentity\": \"Unknown\",\n      \"powers\": [\n        \"Immortality\",\n        \"Heat Immunity\",\n        \"Inferno\",\n        \"Teleportation\",\n        \"Interdimensional travel\"\n      ]\n    }\n  ]\n}\nalert(donnee.ville);\nalert(donnee.membres[0].name);\nalert(donnee.membres[2].powers[2]);\n\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
1. Mettre une image en background d’un canvas. Il suffit d’utiliser un peu de css,…<\/p>\n
Read the postISN: quelques petits coups de main<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":1000,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[58],"tags":[],"_links":{"self":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/997"}],"collection":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/comments?post=997"}],"version-history":[{"count":2,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/997\/revisions"}],"predecessor-version":[{"id":1001,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/997\/revisions\/1001"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media\/1000"}],"wp:attachment":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media?parent=997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/categories?post=997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/tags?post=997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}