javascript画板,JAVA画板

javascript如何实现把界面上的点，动态的依次连接成一个封闭的图形？

!DOCTYPE html

html

head

    meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=1.0,initial-scale=1.0,width=device-width" /

    meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

    title/title

meta charset="utf-8" /

/head

body

    svg width="200" height="200" viewBox="0 0 200 200"

        path d="M20 20, L40 0, 60 20, 80 0, 60 40 Z" stroke="#0ff" stroke-width="1px" fill="#f0f"/path

    /svg

/body

/html

这个是SVG实现，支持所有移动端，PC端除IE9以下不支持其他大部分也支持。

svg在html中就是用来绘制矢量图的，理论上任何图形都可以用svg画出来，同时他也和普通html对象一样，有自己的各种事件以及样式。

代码解析：svg标签，插入一个矢量图，宽度200px，高度200px。可视区域是从坐标0 0开始的200 * 200的正方形（说的很拗口。。）

path标签，定义一个路径，d属性定义了路径是啥样的，M20 20表示把起点移到X：20，Y：20的位置上， L40 0表示把这条线连接到X：40，Y：0的位置上，然后接着连接到X：60，Y：20位置再移动到X：80，Y：0在移动到X：60，Y：40，接着 Z表示把这个路径闭合，即从最后一个点X：60，Y：40再连接到起点X：20，Y：20的位置上。

stroke属性表示边框颜色，stroke-width表示边框宽度，fill表示填充颜色。

svg还有很多标签以及属性，不一一给你展示了。。

!DOCTYPE html

html

head

    meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=1.0,initial-scale=1.0,width=device-width" /

    meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

    title/title

meta charset="utf-8" /

/head

body

    canvas width="200" height="200"/canvas

    script type="text/javascript"

        var canvas = document.getElementsByTagName("canvas")[0];

        var context = canvas.getContext("2d");

        context.fillStyle = "#f0f";

        context.lineWidth = 1;

        context.strokeStyle = "#0ff";

        context.moveTo(20, 20);

        context.lineTo(40, 0);

        context.lineTo(60, 20);

        context.lineTo(80, 0);

        context.lineTo(60, 40);

        context.fill();

    /script

/body

/html

这个canvas效果一样的，但是他就是一个画板，里面画出来的东西是死的，没有交互的。。

代码自己参考svg再加上自己的理解搞吧

相关问答

Q1: javascript onLoad函数中canvas 画板上画不了图片 却可以画形状

Image加载图片是异步运行的，也就是说当你运行到ctx.drawImage(img,0,0,200,200);时，img中的图片还没有实际加载完毕，因此就会出现空白了（这种情况只在Chrome浏览器出现，FireFox中是正常的）。解决的办法就是要预加载图片，最简单的就是加个隐藏的img标签，比如：

img src="p2.gif" style="display:none" /

专业点的方法则要复杂一些，比如：

script type="text/javascript"

function init(){

var ctx=document.getElementById('canvas').getContext('2d');

preImage("p2.gif",function(){

ctx.drawImage(this,0,0,200,200);

});

ctx.fillRect(200,200,200,200);

}

function preImage(url,callback){

var img = new Image(); //创建一个Image对象，实现图片的预下载

img.src = url;

if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数

callback.call(img);

return; // 直接返回，不用再处理onload事件

}

img.onload = function () { //图片下载完毕时异步调用callback函数。

callback.call(img);//将回调函数的this替换为Image对象

};

}

/script

Q2: 如何用javascript做一个类似于画板中选颜色的那种颜色选择板?

颜色是由red green blue三种色调组成的

创建一个函数，实现RGB随机组合

然后拼一个table