canvas | 易学教程

(set! (.-onload image) (fn [] )) not working

阅读更多关于 (set! (.-onload image) (fn [] )) not working

问题 I have the following code which takes as input some images and then compresses them using the compress-omg function, which takes a data-url of each image inputted in sequence and stores the compressed blobs in a db vector :images (defn image-selector [] [:<> ;; appending image in this div [:div {:id "test-div"}] [:input {:type "file" :multiple true :id "input-image" :on-change (fn [e] (let [files (array-seq (.. e -target -files))] (doseq [file files] ;; must create a new file-reader in each

HTML5 Canvas圆盘抽奖应用DEMO

阅读更多关于 HTML5 Canvas圆盘抽奖应用DEMO

HTML5 Canvas圆盘抽奖应用DEMO html页面 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>HTML5 Canvas圆盘抽奖应用DEMO演示</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="css/main.css"> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/main.js"> </script> </head> <body> <div class="turnplate_box"> <canvas id="myCanvas" width="300px" height="300px">抱歉！浏览器不支持。</canvas> <canvas id="myCanvas01" width="200px" height="200px">抱歉！浏览器不支持。</canvas>

6.HTML5--制作Flappy Bird

阅读更多关于 6.HTML5--制作Flappy Bird

3 月，跳不动了？>>> var canvas = document.getElementById("canvas"); var c = canvas.getContext("2d"); //三个类，Bird类，Obstacle类，FlappyBird类（游戏主要函数） function Bird(x, y, image) { this.x = x, this.y = y, this.width = image.width / 2, this.height = image.height, this.image = image; this.draw = function(context, state) { if (state === "up") context.drawImage(image, 0, 0, this.width, this.height, this.x, this.y, this.width, this.height); else{ context.drawImage(image, this.width, 0, this.width, this.height, this.x, this.y, this.width, this.height); } } }; function Obstacle(x, y, h, image) { this.x = x, this.y =

HTML5飞机大战

阅读更多关于 HTML5飞机大战

3 月，跳不动了？>>> <html> <head> <meta charset="UTF-8"> <title>飞机大战</title> </head> <body> <canvas id="myCanvas" width="320" height="480" style="border: solid"> 你的浏览器不支持canvas画布元素，请更新浏览器获得演示 </canvas> <div id="message_txt" style="display: block;">飞机大战</div> <div id="score_txt" style="display: block;">分数:0分</div> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); document.addEventListener("keydown",onkeydown); var Plan = function (image,x,y,n) { this.image = image; this.x = x; this.y = y; this.originX = x; this.originY = y; this

html 小鸟游戏

阅读更多关于 html 小鸟游戏

3 月，跳不动了？>>> js var canvas=document.getElementById('canvas'); var c =canvas.getContext('2d'); //Bird类，Obstacle类，FlappyBird类（主要类） function Bird(x,y,image){ this.x=x, this.y=y, this.width=image.width/2, this.height=image.height, this.image=image; this.draw=function(context,state){ if(state==='up'){ context.drawImage(image,0,0,this.width,this.height,this.x,this.y,this.width,this.height); } else{ context.drawImage(image,this.width,0,this,width,this.height,this.x,this.y,this.width,this.height); } } }; function Obstacle(x,y,h,image){ this.x=x, this.y=y, this.width=image.width/2, this.height=h, this

Rounded corners on chartJS v.2 - bar charts (with negative values)

阅读更多关于 Rounded corners on chartJS v.2 - bar charts (with negative values)

问题 I'm styling some chartjs bar charts which need rounded corners at the bar's values (not their base), In most cases this means rounded corners at the top of the bar's however there are also instances where the bars have negative values. I've used the answer here: How to create rounded bars for Bar Chart.js v2? provided by jordanwillis (https://stackoverflow.com/users/7581592/jordanwillis) which works great when values are positive but not when values are negative. See attached example: bars

canvas元素大小与绘图表面大小

阅读更多关于 canvas元素大小与绘图表面大小

原文链接： canvas总结：元素大小与绘图表面大小前言我们使用canvas的时候一般在canvas元素中直接设置它的width和height： 1 <canvas id= "myCanvas" width= "300" height= "150" >browser don't support canvas</canvas> 当然，也可以不在canvas中进行设置，直接在css样式中设置，因为canvas本身也是一个html节点 1 canvas{width:600px;height:300px} 设置以后，打开页面，发现canvas画布展示大小也ok，这个时候，我们在上面画一个40*40矩形，看下效果 1 2 3 4 5 var canvas = document.getElementById( 'canvas' ), context = canvas.getContext( '2d' ); context.fillStyle = 'cornflowerblue' ; context.fillRect(0, 0, 40, 40); 运行页面，展示如下 canvas大小为600px，高为300px，没有任何问题，符合预期。但是矩形...这显然不是40*40好吧，这是80*80 为什么会发生这种情况呢？ canvas的元素大小与绘图表面大小 canvas的大小分为两种

图片转化成base64编码

阅读更多关于图片转化成base64编码

var img = "imgurl";//imgurl 就是你的图片路径 function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); var dataURL = canvas.toDataURL("image/"+ext,0-1);(0-1　　　　表示图片的质量) return dataURL; } var image = new Image(); image.src = img; image.onload = function(){ var base64 = getBase64Image(image); console.log(base64); } 来源： https://www.cnblogs.com/ypwei/p/9952003.html

firemonkey EDit 改变颜色

阅读更多关于 firemonkey EDit 改变颜色

PS：本来不应该有多难，结果折腾了半天, firemonkey EDit Canvas 按需绘颜色 procedure TForm.EditPaint(Sender: TObject; Canvas: TCanvas; const ARect: TRectF); var ARect1: TRectF; begin //绘制颜色 (Sender as TEdit).BeginUpdate; ARect1:=ARect; ARect1.Left:=1; ARect1.Top:=1; ARect1.Bottom:=ARect.Bottom-1; ARect1.Right:=ARect.Right-1; if (Sender as TEdit).Text= ((Sender as TEdit).Hint) then begin Canvas.Fill.Kind := TBrushKind.Solid; Canvas.Fill.Color := TAlphaColorRec.Blue; Canvas.FillRect(ARect1, 0, 0, [], 1); (Sender as TEdit ).FontColor:=TAlphaColorRec.red; end else begin // Canvas.Fill.Kind := TBrushKind.Solid; Canvas.Fill

用canvas画的圣诞树。

阅读更多关于用canvas画的圣诞树。

明天圣诞节了。于是乎就想起了圣诞树。我用的是paperjs，和html5 canvas来实现。直接看实例吧 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Merry Christmas!</title> <script type="text/javascript" src='http://zgrossbart.github.com/Dandelion/paper.js'></script> <script type="text/paperscript" canvas='mycanvas'> var center = new Point(680, 80); var points = 5; var radius1 = 18; var radius2 = 25; var randColor = ['#F2385A','#F5A503','#E9F1DF','#4AD9D9','#36B1BF','#274C00','#7F9400','#D4D34D','#EDFFA9','#DB4646']; var randText = ['☆','love','sj','rx','♥','◇','520','★',]; function getRandomNum(first,last){