canvas | 易学教程

canvas的基本应用

阅读更多关于 canvas的基本应用

html5的canvas元素使用JavaScript在网页上绘制图像画布是一个矩形区域，可以控制其每一个像素 canvas拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法。 HTML添加canvas元素规定元素的ID，宽度和高度 <canvas id="canvas" width="200" height="100"></canvas> javascript使用ID来寻找canvas元素 //制作矩形<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); //制作线性 var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50)cxt.lineTo(10,50)cxt.stroke()//制作圆形var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="

图片裁剪功能的实现

阅读更多关于图片裁剪功能的实现

概述从4月初到5月份，差不多一个多月，终于把裁剪图片的功能码出来了，期间，解决了一个又来一个问题，好吧，问题总是会有的。这里大致介绍这个裁剪功能技术点、主要难点，实现原理。技术点图片缩放、移动裁剪区域预览裁剪(包括越图片边界裁剪) 边界限制主要难点裁剪区域预览裁剪边界限制实现原理裁剪预览区域的实现在我做过的项目中，就有使用过一些网络上开源的裁剪功能：半透明遮罩层的矩形预览框功能。它的实现原理是在裁剪预览区域外的地方填充了几个半透明的矩形框，进而实现了矩形裁剪预览框功能，如下图。这种功能虽然可以实现预览功能，但是仅仅局限于当预览区外的地方可以通过规则的形状填充，如果是圆形的裁剪预览框，那么就没办法通过这种方式来实现了。所以我们需要另外想过办法来实现圆形的预览框。在一开始的时候，我这边的思路是通过在半透明的遮罩层上镂空一个预览框。我们来试试在半透明的遮罩层上叠加一个透明的预览框。 public void onDraw(Canvas canvas){ //绘画半透明遮罩 canvas.drawColor(Color.parseColor("#90000000")); Paint paint = new Paint(); paint.setColor(Color.TRANSPARENT); paint.setStyle(Paint.Style.FILL);

点状地图（map）

阅读更多关于点状地图（map）

点状地图示例 HTML CSS JS 示例 HTML < canvas id = " map " > </ canvas > CSS body,html, canvas { width : 100% ; height : 100% ; padding : 0 ; margin : 0 ; overflow : hidden ; } JS var renderer , scene , camera , ww , wh , particles ; ww = window . innerWidth , wh = window . innerHeight ; var centerVector = new THREE . Vector3 ( 0 , 0 , 0 ) ; var previousTime = 0 ; var getImageData = function ( image ) { var canvas = document . createElement ( "canvas" ) ; canvas . width = image . width ; canvas . height = image . height ; var ctx = canvas . getContext ( "2d" ) ; ctx . drawImage ( image , 0 , 0 ) ;

jquery生成二维码图片

阅读更多关于 jquery生成二维码图片

1.插件介绍 jquery.qrcode.min.js插件是jq系列的基于jq，在引入该插件之前要先引入jq。能够在客户端生成矩阵二维码QRCode 的jquery插件，使用它可以很方便的在页面上生成二维条码。闲话少说，看demo吧！（haha...） 2.快速使用demo 简单介绍：这是一款快速应用案例，没有太特殊的需求的话够用了。鉴于需求，本例是把二维码生成了图片，可以保存到手机，然后发送给好友，直接识别二维码。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>二维码分享xx</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css" /> 8 <script src="jquery-1.8.3.min.js"></script> 9 <script src="jquery.mobile-1.4.5.min.js"></script> 10 <script src=

记录学习 Web 前端----绘图Canvas

阅读更多关于记录学习 Web 前端----绘图Canvas

绘图canvas （1）定义画布 <canvas id= "myCanvas" width= "860" height= "480" > 浏览器不支持画布 </canvas>  （2）设置画布样式画布样式 #myCanvas { border : 1px solid black ; } （3）JS 准备绘图上下文环境 <script> function draw(event) { var canvas = document. getElementById ( "myCanvas" ) ; //通过文档dcument它的方法来得到id是myCanvas这样的一个元素，保存在canvas里// var pen = canvas. getContext ( "2d" ) ; //当前我们绘图是一个平面的二维绘图，保存到pen---准备好画笔// pen. moveTo ( 50,50 ) ; //将画笔移动到起始点// pen. lineTo ( 300,300 ) ; //用lineTo绘图方法完成起始点到终点的绘制// pen.lineWidth = 5 ; //笔触的粗细// pen.strokeStyle = "red" ; //笔触的颜色// pen. stroke ( ) ; /

Canvas -画图

阅读更多关于 Canvas -画图

2014-09-30 09:14:57 <!doctype html> <html> <head> <title> </title> </head> <style> </style> <body> <canvas width=="500" height="500" id="demo"> 您的浏览器不支持canvas！ </canvas> <script> var canvas = document.getElementById('demo'); // alert(canvas); var ctx = canvas.getContext('2d'); //alert(ctx) ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(200,10); ctx.closePath(); ctx.stroke(); //end ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(100,70); ctx.closePath(); ctx.stroke(); //end ctx.beginPath(); ctx.moveTo(200,10); ctx.lineTo(290,60); ctx.closePath(); ctx.stroke(); //end ctx.beginPath(); ctx.moveTo

canvas画图

阅读更多关于 canvas画图

一，基本用法 1，使用前给canvas设定高度和宽度，出现在标签中的内容在浏览器不支持canvas时使用　　<canvas id="drawing" width="200",height="200">A drawing of something</canvas> 2，getContext("2d");取得绘图上下文的引用　　var drawing = document.getElementById("drawing"); 　　 if(drawing.getContext){ 　　　　 var context = drawing.getContext("2d"); 　　 } 3,使用toDataURL()方法，可以导出canvas元素上绘制的图像，接收一个MIME类型格式　　var drawing = document.getElementById("drawing"); 　　if(drawing.getContext){ 　　　　var context = drawing.getContext("2d"); 　　　　var imgURL = drawing.toDataURL("image/png"); 　　　　var image = document.createElement("img"); 　　　　image.src=imgURL; 　　　　document.body

canvas画图

阅读更多关于 canvas画图

这个元素负责在页面中设定一个区域，然后就可以通过JS动态的在这个区域中绘制图形。 <canvas>由几组API构成。 <canvas>还建议一个名为WebGL的3D上下文（1）基本用法 <canvas id="drawing" width="200" height="200">a drawing of something</canvas> var drawing = document.getElementById("drawing"); if(drawing.getContext){ 　　var context = drawing.getContext("2d");//为html规范之外的元素创建默认的html元素 } (2)2D上下文填充和描边 var drawing = document.getElementById("drawing"); if(drawing.getContext){ 　　var context = drawing.getContext("2d");//为html规范之外的元素创建默认的html元素　　context.strokeStyle = "red"; 　　context.fillStyle = "#0000ff"; } 绘制矩形 context.fillStyle = "#ff0000"; context.fillRect(10,10,50

canvas的api小结

阅读更多关于 canvas的api小结

HTML 　　<canvas id="canvas"></canvas> Javascript 　　var canvas=document.getElementById('canvas'); 　　canvas.width 　　canvas.height 　　var context=canvas.getContext("2d") 　　//使用context进行绘制　　//画图线　　moveTo(x,y); 　　lineTo(x,y); 　　beginPath(); 　　closePath(); 　　//状态　　lineWidth　　//线粗　　strokeStyle　　//线颜色　　fillStyle　　//封闭图形的填充颜色　　　　//执行　　stroke(); 　　fill(); 1.绘制矩形api 　　rect(x,y,width,height)　　//起始点坐标x,y 宽width 高height　　（普通）　　fillRect(x,y,width,height) 　　//绘制填充矩形　　strokeRect(x,y,width,height)　　//绘制带边框矩形 2.线条属性 1.lineWidth 线宽 2.lineCap 线端点的形状　　lineCap=“butt”（default）折头　　　　　　“round”　　圆头　　　　　　

WPF之路——Canvas布局(画布)

阅读更多关于 WPF之路——Canvas布局(画布)

Canvas为容器控件，用于定位 1.基本应用可以把 Canvas比作一个坐标系 ,所有的元素通过设置坐标来决定其在坐标系中的位置 .这个坐标系的原点并不是在中央 ,而是位于它的左上角 .见下图元素设置坐标的方法共有四个: Canvas.Top 设置元素距Canvas顶部的距离 Canvas.Bottom 设置元素距Canvas底部的距离 Canvas.Left 设置元素距Canvas左边界的距离 Canvas.Right 设置元素距Canvas右边界的距离 [html] view plain copy <Border HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="2"> <Canvas Background="LightBlue" Width="400" Height="400"> <Button Canvas.Top="50">Canvas.Top="50"</Button> <Button Canvas.Bottom="50">Canvas.Bottom="50"</Button> <Button Canvas.Left="50">Canvas.Left="50"</Button> <Button Canvas.Right="50"

订阅 canvas