canvas | 易学教程

Isometric rendering without tiles, is that goal reachable?

阅读更多关于 Isometric rendering without tiles, is that goal reachable?

问题 I'm creating a 2d game in HTML5 canvas. It's an isometric world, so actually it's also 3d. You always see that isometric games use tiles, and I think the reason is just for the depth logic. My goal is to create the game without using a tile system. Each item can be placed by the user, so item locations like walls, trees, etc., have variable positions. The positions are isometric x, y, z coordinates. If the game was just tiled, you could determine a fixed tile area for each item. (I mean: a

Put the video tag on the Canvas tag

阅读更多关于 Put the video tag on the Canvas tag

问题 I would like to put the video player on Canvas. (Since my video is alpha channel and I would like to play the video on jpg) I made code like this below html <video id="mainVideo" src="item0.mp4"> </video> <canvas id="mainCanvas"> </canvas> my css #mainCanvas { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 400; height: 400; } #mainVideo { position: absolute; top: 300; left: 300; margin: -50px 0 0 -50px; } my javascript document.addEventListener('DOMContentLoaded', function()

changing the clicked image in the canvas

阅读更多关于 changing the clicked image in the canvas

问题 i am making this simple canvas . it has three images in it (identical images). i want to change only the clicked image. what i am trying to do is save the image order in a array . and only the change the index of the image which was clicked . so far i am clueless how to do so ! i have done it with hard coded but cnt do this in general as i dnt know where the user clicked . if i could get the position of the mouse when it was clicked or the id of the image which was clicked i could do

HTML5 Canvas Drawing History

阅读更多关于 HTML5 Canvas Drawing History

问题 I'm curious to know how applications such as Adobe Photoshop implement their drawing history with the ability to go back or undo strokes on rasterized graphics without having to redraw each stroke from the beginning... I'm wanting to implement a similar history function on an HTML5 drawing application I'm working on but duplicating the canvas after every stoke seems like it'd use too much memory to be a practical approach, especially on larger canvas'... Any suggestions on how this might be

Masked bitmap on canvas with transparent activity

阅读更多关于 Masked bitmap on canvas with transparent activity

问题 I implemented custom ShowCase for activity I am trying to draw on canvas mask: http://i.stack.imgur.com/u23kQ.png Following this code: mCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR); // draw solid background mCanvas.drawColor(mMaskColour); // Prepare eraser Paint if needed if (mEraser == null) { mEraser = new Paint(); mEraser.setColor(0xFFFFFFFF); mEraser.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)); mEraser.setFlags(Paint.ANTI_ALIAS_FLAG); } // draw (erase) shape /

Draw on Canvas multiple times

阅读更多关于 Draw on Canvas multiple times

问题 I've got a little problem on a exercise of my class. The exercise is to draw Shapes multiple times on Canvas. But I can only draw once, when I draw another one, the previous is deleted. Here is my CustomView code. figuras is an LinkedList of shapes that in the future I will save them. On draw i shall sraw the figures from the LinkedList. package com.example.AndroidTest; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint

图片和canave互相转化

阅读更多关于图片和canave互相转化

使用JavaScript将图片拷贝进画布要想将图片放入画布里，我们使用canvas元素的 drawImage 方法： // Converts image to canvas; returns new canvas element function convertImageToCanvas(image) { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0); return canvas; } 返回值相当于canvas节点这里的 0, 0 参数画布上的坐标点，图片将会拷贝到这个地方。浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 drawImage() 方法。注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。定义和用法 drawImage() 方法在画布上绘制图像、画布或视频。 drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。 context.drawImage(img,sx

create canvas dynamically in wordpress and use original image size and position

阅读更多关于 create canvas dynamically in wordpress and use original image size and position

问题 Okay, I am quite new to Javascript and JQuery, but after hours and hours of research I can't help myself but ask this question. I want to write a hoverfunction that creates a greyscale-version of an image and lies this new black-and-white image above the original. I've found a nice working code on spyrestudios.com, so my code looks like this: HTML normal code  <img id="canvasSource" class="testpic" width="480" height

How to dynamically draw bitmaps to a Canvas in Android?

阅读更多关于 How to dynamically draw bitmaps to a Canvas in Android?

问题 Here is the scenario of the issue . A custom view which is a canvas on which I need to draw . 2 buttons beneath it ,lets call them A and B When A is clicked -> Image A is drawn to the above canvas . When B is clicked -> Image B is drawn to the above canvas . The issue demands that the previously drawn image on canvas must be preserved . That is if you click button A followed by button B then the canvas must contain two images . So the previous images need to be preserved. Problem : How do you

KineticJS: How can I use an SVG Sprite with KineticJS Sprites?

阅读更多关于 KineticJS: How can I use an SVG Sprite with KineticJS Sprites?

问题 I have a SVG sprite with looks like the following schema: Image Image Image Image Image Image Image Image Image Where Image is an image and all nine images are the sprite. They are all on one layer. There is a tutorial for sprites with PNG files here but I could not find how to make SVG files work. How do I set the coordinates for the frames when I use an SVG sprite? How do I use an SVG sprite? Edit: Here is the code for the tutorial. <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px;