canvas画板源码（前端canvas画布）
本文目录一览：
- 1、我用canvas做了个画板，现在想用 来控制颜色
- 2、html5 canvas写一个图片围绕图片中心一直旋转的代码，用translate和rotate方法
- 3、HTML5如何通过canvas，把两张图片绘制到画布，然后导出大图
- 4、Android自定义控件复写onDraw(Canvas canvas)，canvas是怎样获取的？
- 5、Java Canvas
我用canvas做了个画板，现在想用 来控制颜色
input type="color" name="" id="colorSelect" value="" /
canvas id="canvas" width="320" height="200" style="border:1px solid #eee;"您canvas画板源码的浏览器不支持canvas/canvas
script
var selector = document.getElementById("colorSelect");
selector.onchange = function(){
var color = this.value;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var w = canvas.width , h = canvas.height;
ctx.fillStyle = color;
ctx.fillRect(0, 0, w, h);
}
/script
html5 canvas写一个图片围绕图片中心一直旋转的代码，用translate和rotate方法
一定要用canvas吗？这里给你一个代码，看看能不能参考一下，有必要你模仿着改成canvas咯。
上代码(图片自己找一张)：
html
head
style
#rotate_img {
margin: 100px;
}
/style
/head
body
button onclick="rotate()"开始旋转/button
button onclick="pause()"暂停旋转/button
!--这里自己找张图片，路径写对就行--
img src='photo.jpg' id='rotate_img'/
/body
/html
script
!--
var x, n=0, rotINT;
function rotate() {
x = document.getElementById("rotate_img");
clearInterval(rotINT);
rotINT = setInterval("startRotate()",10);
}
function pause () {
clearInterval(rotINT);
}
function startRotate() {
n = n + 1;
x.style.transform = "rotate(" + n + "deg)";
x.style.webkitTransform = "rotate(" + n + "deg)";
x.style.OTransform = "rotate(" + n + "deg)";
x.style.MozTransform = "rotate(" + n + "deg)";
if (n == 180 || n == 360) {
if (n = 360){
n = 0;
}
}
}
//--
/script
HTML5如何通过canvas，把两张图片绘制到画布，然后导出大图
img src="......." id="img1" /
img src="......." id="img2" /
img id="img3" /
var img1 = document.getElementById("img1"),
img2 = document.getElementById("img2"),
img3 = document.getElementById("img3");
var canvas = document.createElement("canvas"),
context = canvas.getContext("2d");
canvas.width = img1.naturalWidth + img2.naturalWidth;
canvas.height = Math.max(img1.naturalHeight,img2.naturalHeight);
// 将 img1 加入画布
context.drawImage(img1,0,0,img1.naturalWidth,img1.naturalHeight);
// 将 img2 加入画布
context.drawImage(img1,img2.naturalWidth,0,img2.naturalWidth,img2.naturalHeight);
// 将画布内容导出
var src = canvas.toDataURL();
img3.src = src;
pdrawImage 的使用方法可以去这里看一下/p
a href="" /
Android自定义控件复写onDraw(Canvas canvas)，canvas是怎样获取的？
看源码View.java
上图，draw方法会调用onDraw。
ViewRootImpl.java中
如果是软件绘制的话，drawSoftWare方法会调用view.draw()方法。
从上图中可以看到canvas来源于mSurface.lockCanvas。这里会调用到native层，简单点说就是去申请了一块buffer。这个时候canvas就可以用了，接下来就会调用view.draw方法。
具体点的过程自己可以去看看。
Java Canvas
从词源可以看出
Canvas，麻布-画布-画油画的画板。
Panel 小块布-块版-面板、墙板、地板
Canvas，直接继承自Component组件，主要用于绘图，没有控件，更原始
Panel，继承自Container容器，主要用于镶嵌在其他控件里面当面板。
由于Java SE版的Canvas和Panel都继承自Component，共用Component的paint(Graphics g)
方式绘制自己的内容。由于使用同一个Graphic类，所以那些drawXXX都一致。
绘制的方式一样，2者的绘制速度就没大区别，
Canvas更适合画全屏的、没有控件的情形。像手机上JavaME就主要用Canvas
Panel适合嵌入到其他控件中使用。
