canvas | 易学教程

Change color lines in canvas when mouseover

阅读更多关于 Change color lines in canvas when mouseover

问题 I have some lines in canvas. I want each single line change color when the mouseover that line but I have some issues with this problem. Is there any JS library to help me solve this problem? Can you help me? Thanks var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var width = 400; var height = 400; for(i=0; i<120 ;i+=15){ context.beginPath(); context.moveTo(90+i, 0); context.lineTo(250, 400); context.lineWidth = 1; context.strokeStyle = '#28B9A2';

Image Masking With Canvas or SVG in Responsive Design

阅读更多关于 Image Masking With Canvas or SVG in Responsive Design

问题 I'm attempting to render the images on a site as if they were different geometric shapes. For instance, a normally square image could be displayed as a hexagon, a circle, a pentagon, an octagon, etc. This is a responsive site, meaning that the original images will be styled with max-width: 100%; , and they'll be sized depending on their container element. The first thought that I had was to create several transparent PNG "overlay images" with each desired geometric shape "knocked out" in the

Image converted to Base64 not showing on bootstrap modal's canvas

阅读更多关于 Image converted to Base64 not showing on bootstrap modal's canvas

问题 I am taking the Image from user,performing the crop operation, converting it to base64 and then drawing it on a canvas. For the cropping I am using jcrop library. $(document).on("change","#photograph",function() { $("#picCrop").modal('show'); $("#views").empty(); image = null; canvas = null; alert("canvas"+(canvas==null)+" Image"+ (image==null)); loadImage(this); $(this).replaceWith('<input id="photograph" type="file" class="form-control">'); }); Here I am facing the issue, without alert(

Image in tkinter window by clicking on button

阅读更多关于 Image in tkinter window by clicking on button

问题 I need help about this program, this program should open image in new tkinter window by clicking on button, but it doesn't it just opens new window without image. Where is the problem? Using: python 3.3 and tkinter This is program: import sys from tkinter import * def button1(): novi = Toplevel() canvas = Canvas(novi, width = 300, height = 200) canvas.pack(expand = YES, fill = BOTH) gif1 = PhotoImage(file = 'image.gif') canvas.create_image(50, 10, visual = gif1, anchor = NW) mGui = Tk()

JavaScript prototype inheritance and html canvas

阅读更多关于 JavaScript prototype inheritance and html canvas

问题 I'm a Ruby developer who finally decided to learn JavaScript seriously. So I purchased some books and I started to dive in, but I got stuck quickly when I tried to understand prototypal inheritance... One of the examples of the book is the following. Given a Shape which prototype has a draw method, and two child shapes: a Triangle and a Rectangle which prototype inherit from Shape; when I call the draw function on Triangle and Rectangle instances the method will draw them properly. when I add

JavaScript prototype inheritance and html canvas

阅读更多关于 JavaScript prototype inheritance and html canvas

canvas tag produces black block in chrome

阅读更多关于 canvas tag produces black block in chrome

问题 This is very frustrating. If I don't set the height and width of the canvas, canvas draws just fine, but when I do set the height and width I get back a black box. I've stripped my code down to an insane degree and can't find any problem. The canvas tag works great in FF and IE9. var canvas = document.getElementById('can1'); var ctx = canvas.getContext('2d'); canvas.width = 280; canvas.height = 270; ctx.clearRect(0, 0, canvas.width, canvas.height); Even just this destroys the canvas in google

Tips——canvas闪屏问题的处理

阅读更多关于 Tips——canvas闪屏问题的处理

一、问题描述在画canvas时，遇到屏幕瞬间空白的情况（大约1~2帧），造成用户体验不好。二、原因 canvas的绘图过程是：先擦出整个画布；然后浏览器到达重绘时间点后，在空白的canvas上作画；xx毫秒后，这一帧动画上的所有元件完成绘画。那么，当采用setTimeout或setInterval等与浏览器重绘频率不同步的计时器对画布进行绘图时，很可能上一帧的元件内容还没被完全画出来时，不精准的计时器已经驱动着擦除画布开始下一帧绘画；以及这一帧绘画已经结束，但不精准的计时器还没到指定刷新时间，所以此时会出现明显空白，也即“闪屏”。三、解决双缓冲理论：闪烁是图形编程的一个常见问题。需要多重复杂绘制操作的图形操作会导致呈现的图像闪烁或具有其他不可接受的外观。双缓冲的使用解决这些问题。双缓冲使用内存缓冲区来解决由多重绘制操作造成的闪烁问题。当启用双缓冲时，所有绘制操作首先呈现到内存缓冲区，而不是屏幕上的绘图图面。所有绘制操作完成后，内存缓冲区直接复制到与其关联的绘图图面。因为在屏幕上只执行一个图形操作，所以消除了由复杂绘制操作造成的图像闪烁。即，先创建一个cacheCanvas执行计算绘制的操作，当下一帧刷新时，直接将cacheCanvas的内容drawImage到真正的canvas上，这么做既能有效规避闪屏，又能减缓卡顿情况。示例代码： var testBox =

WPF Canvas子控件拖拽行为

阅读更多关于 WPF Canvas子控件拖拽行为

1 public class DragMoveBehavior: Behavior<UIElement> { Canvas parent; bool isDown; Point prePosition = new Point(); protected override void OnAttached() { base.OnAttached(); base.AssociatedObject.MouseLeftButtonDown += MouseLeftButtonDown; base.AssociatedObject.MouseLeftButtonUp += MouseLeftButtonUp; base.AssociatedObject.MouseLeave += MouseLeave; parent = LogicalTreeHelper.GetParent(base.AssociatedObject) as Canvas; parent.MouseLeftButtonUp += MouseLeftButtonUp; parent.MouseMove += MouseMove; } private void MouseMove(object sender, MouseEventArgs e) { if (!isDown) return; Point

简单的canvas翻角效果

阅读更多关于简单的canvas翻角效果

由于工作需求 , 需要写一个翻角效果; demo链接右上角需要从无的状态撕开一个标记 , 且有动画过程 , 上图是实现的效果图 , 不是gif 对这个翻角效果的难点在于没有翻开的时候露出的是dom下面的内容 , 实现角度来说纯dom + css动画的设计方案并没有相出一个好的对策 ; 于是捡起了好久之前学的入门级别的canvas; 下面说一下实现思路: 动画拆分 : 将此动画分解成两部分 , 一部分是翻页出现的黑色三角区域 , 另一个是露出的橘色展示内容对于橘色的展示内容区域相对好一些 , 因为是一个规则图形 , 而黑色区域相对较难; 先从基础canvas使用方法说起 : <div class="container"> <canvas class="myCanvas" width="100" height="100"></canvas> </div> 布局如上 , 这里要说一点踩过的坑是 , canvas必须要设置上width 与 height , 此处并非为css中的width与height;而是写在dom上的属性 ; 因为dom上的width与height标识了canvas的分辨率(个人理解) ; 所以此canvas画布分辨率为100*100 , 而展示尺寸是可以通过css控制; js中首先要做的是获取canvas对象 , var canvas = document