Html5 canvas implements a fantastic 3D tattoo ball, html5canvas

Html5 canvas implements a fantastic 3D tattoo ball, html5canvas

Today, we will bring you a fantastic 3D tattoo ball implemented by html5 canvas. The page is fantastic. As follows:

 

Download Online Preview source code

 

Html code:

<div>        <canvas width="1366" height="62" style="width: 1366px; height: 62px;">        </canvas></div>

Js Code:

 var SCREEN_WIDTH = window.innerWidth,                SCREEN_HEIGHT = window.innerHeight,            r = 200,            mouseX = 0, mouseY = 0,            windowHalfX = window.innerWidth / 2,            windowHalfY = window.innerHeight / 2,            camera, scene, renderer;        init();        animate();        function init() {            var container;            container = document.createElement('div');            document.body.appendChild(container);            camera = new THREE.PerspectiveCamera(80, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000);            camera.position.z = 1000;            scene = new THREE.Scene();            var i, line, vertex1, vertex2, material, p,                    parameters = [[3.5, 0x90CEBF, 0.5, 1]],                    geometry = new THREE.Geometry();            for (i = 0; i < 1500; i++) {                var vertex1 = new THREE.Vector3();                vertex1.x = Math.random() * 2 - 1;                vertex1.y = Math.random() * 2 - 1;                vertex1.z = Math.random() * 2 - 1;                vertex1.normalize();                vertex1.multiplyScalar(r);                vertex2 = vertex1.clone();                vertex2.multiplyScalar(Math.random() * 0.09 + 1);                geometry.vertices.push(vertex1);                geometry.vertices.push(vertex2);            }            for (i = 0; i < parameters.length; ++i) {                p = parameters[i];                material = new THREE.LineBasicMaterial({ color: p[1], opacity: p[2], linewidth: p[3] });                line = new THREE.Line(geometry, material, THREE.LinePieces);                line.scale.x = line.scale.y = line.scale.z = p[0];                line.originalScale = p[0];                line.rotation.y = Math.random() * Math.PI;                line.updateMatrix();                scene.add(line);            }            renderer = new THREE.WebGLRenderer({ antialias: true });            renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);            container.appendChild(renderer.domElement);            document.addEventListener('mousemove', onDocumentMouseMove, false);            document.addEventListener('touchstart', onDocumentTouchStart, false);            document.addEventListener('touchmove', onDocumentTouchMove, false);            //            window.addEventListener('resize', onWindowResize, false);        }        function onWindowResize() {            windowHalfX = window.innerWidth / 2;            windowHalfY = window.innerHeight / 2;            camera.aspect = window.innerWidth / window.innerHeight;            camera.updateProjectionMatrix();            renderer.setSize(window.innerWidth, window.innerHeight);        }        function onDocumentMouseMove(event) {            mouseX = event.clientX - windowHalfX;            mouseY = event.clientY - windowHalfY;        }        function onDocumentTouchStart(event) {            if (event.touches.length > 1) {                event.preventDefault();                mouseX = event.touches[0].pageX - windowHalfX;                mouseY = event.touches[0].pageY - windowHalfY;            }        }        function onDocumentTouchMove(event) {            if (event.touches.length == 1) {                event.preventDefault();                mouseX = event.touches[0].pageX - windowHalfX;                mouseY = event.touches[0].pageY - windowHalfY;            }        }        //        function animate() {            requestAnimationFrame(animate);            render();        }        function render() {            camera.position.y += (-mouseY + 200 - camera.position.y) * .05;            camera.lookAt(scene.position);            renderer.render(scene, camera);            var time = Date.now() * 0.0001;            for (var i = 0; i < scene.children.length; i++) {                var object = scene.children[i];                if (object instanceof THREE.Line) {                    object.rotation.y = time * (i < 4 ? (i + 1) : -(i + 1));                }            }        }

Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/6585

Html5 two canvas overlapping put in a div, each canvas fill in an image, how to write the code?

Specify the postion: absolution of the two canvas, and set the left and top attributes of the two canvas. It is recommended that you put a small canvas on it, the method is to set the z-index of the two canvas to different values, and the value is greater than above.
For the drawing process, refer to the code below:
Var mycanvas = document. getElementByIdx_x_x_x ("mycanvas ");
Var context = mycanvas. getContext ("2d ");
Var imageObj = new Image ();
ImageObj. onload = function (){

// Draw cropped image
Var sourcex= 350;
Var sourceY = 50;
Var sourceWidth = 350;
Var sourceHeight = 350;
Var destWidth = sourceWidth;
Var destHeight = sourceHeight;
Var destX = mycanvas. width/2-destWidth/2;
Var destY = mycanvas. height/2-destHeight/2;
Context. drawImage (imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight );
 
Html5 canvas code: the simplest animation effect: Move a circle on the left to the right

The Code is as follows:
<! DOCTYPE html>
<Html>
<Body>

<Canvas id = "myCanvas" width = "700" height = "550" style = "border: 1px solid # d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</Canvas>

<Script>

Var c = document. getElementById ("myCanvas ");
Var ctx = c. getContext ("2d ");
Var x = 0;
Var ss = setInterval (function (){
Ctx. clearRect (0, 0, 700,550 );
// Ctx. translate (x, 0 );
Ctx. beginPath ();
Ctx. arc (x, 200,50, 0, Math. PI * 2, true );
Ctx. stroke ();
// Ctx. fillRect (x, 10,100, 50 );
If (x> 700 ){
ClearInterval (ss );
}
X + = 20;
},100 );
</Script>
</Body>
</Html>

Try it, just a simple demo, as shown below: