Ⅰ 求一個類似於塗鴉跳躍那種的網頁游戲源碼，要是javascript寫的。
如果你會用openGL或其他的圖形庫寫游戲,那麼網頁版的就應該會,
主要是用html5的canvas,
再用javascript對其進行2D繪圖,操作很簡單,網上有教程,不貼上了,
但要3D繪圖,,可能有點吃力,
谷歌提出的WebGL,雖然支持不是很廣泛,但還是被很多主流瀏覽器支持(自家的chrome就不用說了),通過WebGL開發網頁版的游戲,相對會更加簡單(對於規模大一點的游戲,以及3D的繪圖)
Ⅱ chrome怎樣調試canvas
1、先說一下源碼定位
大家打開測試網頁 看到頁面右下方有一個推薦的圖標嗎？右擊推薦圖標，選擇審查元素，打開谷歌控制台，如下圖所示
我們現在想知道votePost方法到底在哪？跟著我這樣做，在Console面板裡面輸入votePost然後回車
直接點擊上圖標紅的鏈接，控制台將定位到Sources面板中，展示如下圖所示
大家看了上面這個圖片之後估計頭都要暈了吧，這么多js都整在一行，讓人怎麼看呀，不用擔心，按下圖操作即可（也就是點擊中間面板左下方的Pretty print就行了）
這時我們再回到Console面板時會驚奇的發現原來的鏈接後面的1現在變成91了（其實這里的數字1或者91就是代表votePost方法在源碼中的行號 ）現在看出Pretty print按鈕的強大之處了吧
知道了怎麼樣查看某一個按鈕的源碼，那接下來的工作便是調試了，調試第一步需要做的便是設置斷點，其實設置斷點很簡單，點擊一下上圖所示的92即可，這時你會發現92行號旁邊會多了一個圖標，這里解釋一下為什麼不在91處設置斷點，你可以試下，事實上根本就沒法在91處上設置斷點，因為它是函數的定義處，所以沒法在此設置斷點。
設置好了斷點後，你就會在右邊Breakpoints方框里看到剛剛設置的斷點。
我們先來介紹一下用到的調試快捷鍵吧（事實上我們也可以不用下表所示的快捷鍵，直接點擊上圖所示右側欄最上層的一排按鈕來進行調試，具體用哪個按鈕，把滑鼠放到按鈕上方一會就會顯示它相應的提示）
快捷鍵
功能
F8
恢復運行
F10
步過，遇到自定義函數也當成一個語句執行，而不會進入函數內部
F11
步入，遇到自定義函數就跟入到函數內部
Shift + F11
步出，跳出當前自定義函數
其中值得一提的是，當我們點擊「推薦」按鈕進行調試的時候會發現，不管我們是按的F10進行調試還是按F11進行逐步調試，都沒法進行$.ajax函數內部，即使我們在函數內部設置了斷點也沒有辦法進入，這里按F8才是真正起效果的，不信你試試。
當我們在調試的時候，右側Scope Variables裡面會顯示當前作用域以及他的父級作用域，以及閉包。你不僅能在右側 Scope Variables(變數作用域) 一欄處看到當前變數，而且還能把滑鼠直接移到任意變數上，就可以查看該變數的值。
Ⅲ h5 canvas 自定義海報並且生成，有源碼嗎
只要有功能需求，都可以定製開發的
別傻了
才五分就想要
Ⅳ 求一個含五個頁面的網站HTML代碼
建站寶盒的模板，隨便挑一個，然後右鍵查看框架的源代碼
Ⅵ 求用Java實現chord源代碼一份，最好帶有注釋的，多謝
importjava.awt.*;
importjava.awt.event.*;
importjava.awt.geom.*;
importjava.util.*;
importjavax.swing.*;
/**
*多線程，小球演示.打開Windows任務管理器，可看到線程變化。可搜索到，run()方法/.start()
*
*:程序技巧體會：所謂產生一個小球，即是new其類對象，其屬性攜帶畫小球的坐標、顏色、所在容器等參數。
*
*一個類，屬性用來作為參數容器用，方法....完成功能。
**/
//運行類
publicclassBouncePress{
//
publicstaticvoidmain(String[]args){
JFrameframe=newBouncePressFrame();//生成窗口。執行構造。-----業務邏輯。
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//similarto
//window
//listener
frame.show();
}
}
{
privateBallPressCanvascanvas;
publicBouncePressFrame(){
setSize(600,500);//窗口大小
setTitle("BounceBall");
ContainercontentPane=getContentPane();//Swing的窗口不能直接放入東西，只能在其上的ContentPane上放。
canvas=newBallPressCanvas();//生成一個新面板。-----canvas
contentPane.add(canvas,BorderLayout.CENTER);//窗口中心加入該面板。
JPanelbuttonPanel=newJPanel();//再生成一個新面板。----buttonPanel
//調用本類方法addButton。
addButton(buttonPanel,"Start",//生成一個按鈕"Start"---加入面板buttonPanel
newActionListener(){//|------>按鈕綁上action監聽器。
publicvoidactionPerformed(ActionEventevt){//|小球容器對象的
addBall(Thread.NORM_PRIORITY-4,Color.black);//事件處理時，執行---addBall()方法。--->產生小球(參數對象)--->加入List中--->開始畫球。
}
});//按一次，addBall()一次--->產生一個新小球--->加入List中--->開始畫此新小球。
//--->畫球線程BallPressThread的run()--->小球(參數對象).move()--->每次畫時，先移動，再判斷，再畫。
//--->BallPressCanvas類的canvas對象.paint()--->自動調BallPressCanvas類的paintComponent(Graphics
//g)方法。
//--->該方法，從List中循環取出所有小球，第i個球，--->調該小球BallPress類
//.draw()方法--->調Graphics2D方法畫出小球。--使用color/
addButton(buttonPanel,"Express",newActionListener(){
publicvoidactionPerformed(ActionEventevt){
addBall(Thread.NORM_PRIORITY+2,Color.red);
}
});
addButton(buttonPanel,"Close",newActionListener(){
publicvoidactionPerformed(ActionEventevt){
System.exit(0);
}
});
contentPane.add(buttonPanel,BorderLayout.SOUTH);
}
publicvoidaddButton(Containerc,Stringtitle,ActionListenerlistener){
JButtonbutton=newJButton(title);//生成一個按鈕。
c.add(button);//加入容器中。
button.addActionListener(listener);//按鈕綁上action監聽器。
}
/**主要業務方法。*/
publicvoidaddBall(intpriority,Colorcolor){
//生成小球(參數對象)
BallPressb=newBallPress(canvas,color);//生成BallPress對象，攜帶、初始化
//畫Ball形小球，所需參數：所在容器組件，所需color--black/red.
//小球加入List中。
canvas.add(b);//面板canvas的ArrayList中加入BallPress對象。
BallPressThreadthread=newBallPressThread(b);//生成畫小球的線程類BallPressThread對象。傳入BallPress對象(攜帶了畫球所需
//容器、color參數)。
thread.setPriority(priority);
thread.start();//callrun(),ballstarttomove
//畫球線程開始。--->BallPressThread的run()--->小球(參數對象).move()--->先移動，再畫。canvas.paint--->BallPressCanvas類的
}
}
//畫球的線程類。
{
privateBallPressb;
publicBallPressThread(BallPressaBall){
b=aBall;
}
//畫球開始。
publicvoidrun(){
try{
for(inti=1;i<=1000;i++){//畫1000次。
b.move();//每次畫時，先移動，再判斷，再畫。
sleep(5);//所以移動比Bounce.java的球慢。
}
}catch(InterruptedExceptione){
}
}
}
//swing面板類.
//作用1）本類面板對象.paint()方法---->自動繪制面板，且自動調paintComponent(Graphics
//g)方法，--->重寫該方法，繪制面板(及其上組件)。
//作用2）該類對象屬性ArrayListballs---兼作小球(參數對象)的容器。
{
privateArrayListballs=newArrayList();
publicvoidadd(BallPressb){
balls.add(b);//向ArrayList中添加球。當按下按鈕，添加多個球時，都保存在這個List中。
}
//重寫了javax.swing.JComponent的paintComponent()方法。
//paint()方法自動調用該方法。
publicvoidpaintComponent(Graphicsg){
super.paintComponent(g);
Graphics2Dg2=(Graphics2D)g;
for(inti=0;i<balls.size();i++){//循環
BallPressb=(BallPress)balls.get(i);//從List中取出第i個球，
b.draw(g2);//畫此球。
}
}
}
/**
*畫出球。
*
*在canvas上畫出，color色的小球圖形。
*
*屬性，可用於攜帶畫小球所需參數。
*
*
*
*@authorcongan
*
*/
classBallPress{
privateComponentcanvas;
privateColorcolor;
privateintx=0;
privateinty=0;
privateintdx=2;
privateintdy=2;
//構造初始化容器顏色參數。
publicBallPress(Componentc,ColoraColor){
canvas=c;
color=aColor;
}
//制定位置，畫出小球。
publicvoiddraw(Graphics2Dg2){
g2.setColor(color);
g2.fill(newEllipse2D.Double(x,y,15,15));//ellipse:橢圓形
}
//移動小球。
//每次畫時，先移動，再判斷，再畫。
//該方法每次執行，畫小球的起點坐標(x,y),每次各自+2,即斜向右下運動。
publicvoidmove(){
x+=dx;//x=x+dx;畫小球的起點坐標(x,y),每次各自+2,即斜向右下運動。
y+=dy;//y=y+dy;
if(x<0){//小球已到左邊框。保證，從左邊框開始畫。
x=0;
dx=-dx;//小球橫坐標變化值取反。開始反向運動。
}
if(x+15>=canvas.getWidth()){//小球右邊已經到畫板右邊。
x=canvas.getWidth()-15;
dx=-dx;//開始反向運動。
}
if(y<0){//保證，從頂框開始畫。
y=0;
dy=-dy;
}
if(y+15>=canvas.getHeight()){//小球已到畫板頂。
y=canvas.getHeight()-15;
dy=-dy;
}
canvas.paint(canvas.getGraphics());//畫出面板對象canvas----（及其上所有組件）
////.paint()方法，自動調用
}
}
/*importjava.awt.*;
importjava.awt.event.*;
importjava.awt.geom.*;
importjava.util.*;
importjavax.swing.*;
*//**
*單線程，小球演示搜索不到，run()方法/.start()
*//*
publicclassBounce{
publicstaticvoidmain(String[]args){
JFrameframe=newBounceFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//similarto
//window
//listener
frame.show();
}
}
Ⅶ 求源代碼！（迪卡爾心形圖案）
importjavafx.application.Application;
importjavafx.scene.Scene;
importjavafx.scene.canvas.Canvas;
importjavafx.scene.canvas.GraphicsContext;
importjavafx.scene.layout.StackPane;
importjavafx.scene.paint.Color;
importjavafx.stage.Stage;
/**
*笛卡爾情書的秘密r=a(1-sinθ)
*
*@authorcrazykay
*@see《趣味編程100例》心形圖
*/
{
@Override
publicvoidstart(StageprimaryStage){
intwidth,height;
Canvascanvas=newCanvas(350,350);
width=(int)canvas.getWidth();
height=(int)canvas.getHeight();
GraphicsContextgc=canvas.getGraphicsContext2D();
doublex,y,r;
for(inti=0;i<=90;i++){
for(intj=0;j<=90;j++){
//轉換為直角坐標系，設置偏移量，使圖像居中
r=Math.PI/45*i*(1-Math.sin(Math.PI/45*j))*19;
x=r*Math.cos(Math.PI/45*j)*Math.sin(Math.PI/45*i)+width/2;
y=-r*Math.sin(Math.PI/45*j)+height/4;
gc.setFill(Color.RED);
gc.fillOval(x,y,2,2);
gc.fillOval(x,y,1,1);
}
}
StackPaneroot=newStackPane();
root.getChildren().add(canvas);
Scenescene=newScene(root,Color.BLACK);
primaryStage.setTitle("r=a(1-sinθ)");
primaryStage.setScene(scene);
primaryStage.show();
}
publicstaticvoidmain(String[]args){
launch(args);
}
}
網上找的java的代碼。原理能看懂了，改C++應該也不費事。界面的話opencv或者opengl往上懟就行了
Ⅷ html2canvas與代理
關於圖片跨域的問題本人在使用過程中也遇到了，開始使用代理伺服器解決了，但是感覺不太好，
後來偶爾中，在html2canvas源碼中改了幾段小代碼終於把問題給解決了。
function ImageContainer(src, cors) {
this.src = src;
this.image = new Image();
var self = this;
this.tainted = null;
this.promise = new Promise(function(resolve, reject) {
self.image.onload = resolve;
self.image.onerror = reject;
if (cors) {
//self.image.crossOrigin = "anonymous";//1.去掉此處的anonymous代碼改為空
self.image.crossOrigin = "";
}
//self.image.src = src;//2.在源src後面添加一個隨機數如時間戳+"?"+new Date().getTime();
self.image.src = src+"?"+new Date().getTime();
if (self.image.complete === true) {
resolve(self.image);
}
});
}
通過以上改造尼瑪居然把問題給解決了，很奇怪，上面的代碼改造過程缺一不可，不過我的問題是誇子域，還有個關鍵設置，
就是在調用時
html2canvas($("body"),{onrendered:function(canvas){
//
},useCORS:true});
//這個地方只需要將useCORS設置成true，千萬不要加allowTaint:true這兩個不要同時加，我當時在看官網文檔的時候，看到這兩個參數都是解決跨域的，後來就兩個都加上去了，發現兩個加上去就會有問題，具體你可以查看源碼，這里我就不做過多解釋了
Ⅸ HTML5如何通過canvas，把兩張圖片繪制到畫布，然後導出大圖
<imgsrc="......."id="img1"/>
<imgsrc="......."id="img2"/>
<imgid="img3"/>
varimg1=document.getElementById("img1"),
img2=document.getElementById("img2"),
img3=document.getElementById("img3");
varcanvas=document.createElement("canvas"),
context=canvas.getContext("2d");
canvas.width=img1.naturalWidth+img2.naturalWidth;
canvas.height=Math.max(img1.naturalHeight,img2.naturalHeight);
//將加入畫布
context.drawImage(img1,0,0,img1.naturalWidth,img1.naturalHeight);
//將img2加入畫布
context.drawImage(img1,img2.naturalWidth,0,img2.naturalWidth,img2.naturalHeight);
//將畫布內容導出
varsrc=canvas.toDataURL();
img3.src=src;<p>drawImage的使用方法可以去這里看一下</p>
<ahref="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage"/>
Ⅹ 請問誰有這個效果HTML使用canvas+three.js 做世界地圖粒子效果
three.js
這個第三方庫在這里
THREE.ImageUtils.crossOrigin="",e=newTHREE.WebGLRenderer({canvas:document.getElementById("map"),//canvas標識antialias:!0}),e.setSize(a,o),e.setClearColor(1908515),n=newTHREE.Scene,i=newTHREE.PerspectiveCamera(50,a/o,.1,1e4),i.position.set(-100,0,220),i.lookAt(r),n.add(i);vars=THREE.ImageUtils.loadTexture(t.transparentMap,void0,function(){//t.transparentMap為世界地版圖的灰白圖片權A=c(s.image),d()});