快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

javascript画板,JAVA画板

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

!DOCTYPE html

创新互联是一家专注于网站设计、成都网站建设与策划设计,井冈山网站建设哪家好?创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:井冈山等地区。井冈山做网站价格咨询:028-86922220

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再加上自己的理解搞吧

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

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

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

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

然后拼一个table


网站名称:javascript画板,JAVA画板
URL链接:http://6mz.cn/article/dsgisij.html

其他资讯