私たちは、WeChat宝くじ、Taobao宝くじ、Thunder Money-Making Bao Disk宝くじなどの宝くじアクティビティを実施するために一定の金額を購入するなど、さまざまなeコマースプロモーション活動にしばしば参加します。これらのラッフルは、HTML5キャンバスによって部分的に作られています。今日は、HTML5キャンバスを使用してディスクラッフル機能を作成する方法をお客様と共有します。いつものように、最初にレンダリングを見てみましょう：
キャンバスのメインAPIのいくつかを見てみましょう。
すべてのソースコードは次のとおりです。
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> html5キャンバスディスク宝くじアプリケーションデモ</title </title> <meta name = "viewport =" width = "device-width、inivery-scale = 1、ユーザースケーブル= < 0px; font-size：16px; font-family： "microsoft yahei";}。 } .xttblog_box canvas {position：absolute;}＃xttblog {background-color：white; border-radius：100％;}＃xttblog01、＃xttblog03 {left：50px; top：50px; z-dex：30;}＃xtttblog02 {左：75px; 20;}＃xttblog {-o-transform：transform 6s; -ms-transform：transform 6s; -moz-transform：transform 6s; -webkit-transform：変換6s;遷移：変換6s; -o-transform-origin：50％50％; - ms-transform-origin：50％50％; - moz-transform-origin：50％50％; -webkit-transform-origin：50％50％; transform-origin：50％50％; taoge_btn}。 60px;高さ：60px;左：120px; Top：120px; Border-radius：100％; Position：Absolute; Cursor：Pointer; Border：none; background：透過;概要：なし; z-index：40;} </style> <script = "text/javascript" src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <script> $ $ $ [＃626262 "、"＃787878 "、" rgba（0,0,0.5）、 "＃dcc722"、 "＃ff4350"] hard '、' Yuan '、' Yuan '、' Gold Coins '、' Yuan '、' Gold Coins '] Canvasrun（'＃tupbtn '）。 「描画の開始」ボタンは$をクリックしません（ '＃tupbtn'）。アラート（描画の数が使用されています！」）; $（ '＃xttblog'） $（ '＃xttblog'） Info [0]; rotnum + 1935 = info1 [5] == 5）{rotnum + 2025; info1 [1]; canvas02 = document.getElementByID（ 'XTTBLOG02'）= canvas（ '2d'）; CreateCirtext（）; Starting+math.save（）ctx.arc（）; ctx.Stroke（）; CTX.BeginPath（150,150）; yahei "; ctx.filltext（info1 [i]、-30、-95,60）; ctx.closepath（）; ctx.restore（）;}} function initpoint（）{// arrow pointer ctx1.beginpath（）; ctx1.moveto（100,24）; ctx1.lineto（90,62）; ctx1.lineto（100,24）; ctx3。 ctx3 = Color [2];ブラウザはそれをサポートしていません。 </canvas> <canvas id = "xttblog01">ごめんなさい！ブラウザはそれをサポートしていません。 </canvas> <canvas id = "xttblog03">ごめんなさい！ブラウザはそれをサポートしていません。 </canvas> <canvas id = "xttblog02">ごめんなさい！ブラウザはそれをサポートしていません。 </canvas> <button id = "tupbtn"> </button> </div> <！ - デフォルトのポップアップウィンドウ - > <スクリプトタイプ= "text/javascript"> window.alert = function {var shield = document.createelement（ "div"）; shield.id = "shield"; shield.style.position = "absolute"; shield.style.left = "50％"; shield.style.top = "50％"; shield.style.width = "280px"; shield.style.height = "150px"; shield.style.marginleft = "-140px"; shield.style.margintop = "-110px"; shield.style.zindex = "25"; var alertfram = document.createelement（ "div"）; alertfram.id = "alertfram"; alertfram.style.position = "absolute"; alertfram.style.width = "280px"; alertfram.style.height = "150px"; alertfram.style.left = "50％"; alertfram.style.top = "50％"; alertfram.style.marginleft = "-140px"; alertfram.style.margintop = "-110px"; alertfram.style.textalign = "center"; alertfram.style.lineheight = "150px"; alertfram.style.zindex = "300"; strhtml = "<ul style =/" list-style：none; margin：0px; padding：0px; width：100％/">/n"; strhtml += "<li style =/" background：＃626262; left-align：left; padding-left：20px; font-size：14px; font-weight：bold; height：25px; line-height：25px; border：1px solid＃f9cade; strhtml+= "<li style =/" background：＃787878; text-align：center; font-size：12px; height：95px; line-height：95px; border-left：1px solid＃f9cade; border-right：1px solid＃f9cade; strhtml += "<li style =/" background：＃626262; text-align：center; font-weight：bold; height：30px; line-height：25px;境界：1pxソリッド＃f9cade;/"> <入力タイプ=/" button/"value =/" ok/"onclick =/" dook（）/"style =/" width：height：20px; background：＃626262; 4px/"/> </li>/n"; strhtml += "</ul>/n"; alertfram.innerhtml = strhtml; document.body.appendChild（alertfram）; document.body.AppendChild（Shield）; this.dook = function（）{alertfram.style.display = "none"; shield.style.display = "none"; } alertfram.focus（）; document.body.onselectstart = function（）{return false;};} </script> </body> </html>上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。
オリジナルアドレス：http：//www.xttblog.com/?p=399