Javascript HTML5 Canvas实现的一个画板
转载 &更新时间：日 18:36:21 & 作者：suvllian
这篇文章主要介绍了Javascript HTML5 Canvas实现的一个画板的相关资料,需要的朋友可以参考下
本文实例为大家分享了HTML5 Canvas实现的一个画板代码，供大家参考，具体内容如下
&!DOCTYPE html&
&meta charset="utf-8"&
&title&DEMO6：自定义画板&/title&
&canvas id="canvas" width="600" height="300"&
浏览器不支持canvas
&!-- 如果不支持会显示这段文字 --&
&button style="width:80background-color:" onclick='linecolor="yellow";'&YELLOW&/button&
&button style="width:80background-color:" onclick='linecolor="red";'&RED&/button&
&button style="width:80background-color:" onclick='linecolor="blue";'&BLUE&/button&
&button style="width:80background-color:" onclick='linecolor="green";'&GREEN&/button&
&button style="width:80background-color:" onclick='linecolor="white";'&WHITE&/button&
&button style="width:80background-color:" onclick='linecolor="black";'&BLACK&/button&
&button style="width: 80background-color:" onclick="linw=4;"&4PX&/button&
&button style="width: 80background-color:" onclick="linw=8;"&8PX&/button&
&button style="width: 80background-color:" onclick="linw=16;"&16PX&/button&
&button style="width: 80background-color:" onclick="copyimage();"&EXPORT&/button&
&img src="" id="image_png" width="600px" height="300px"&
&script type="text/javascript"&
var canvas = document.getElementById('canvas'); //获取标签
var ctx = canvas.getContext("2d");
var fillStyle = "black";
ctx.fillRect(0,0,600,300);
var onoff = //按下标记
var oldx = -10;
var oldy = -10;
//设置颜色
var linecolor = "white";
var linw = 4;
canvas.addEventListener("mousemove",draw,true); //鼠标移动事件
canvas.addEventListener("mousedown",down,false); //鼠标按下事件
canvas.addEventListener("mouseup",up,false); //鼠标弹起事件
function down(event){
oldx = event.pageX - 10;
oldy = event.pageY - 10;
function up(){
function draw(event){
if (onoff==true) {
var newx = event.pageX - 10;
var newy = event.pageY - 10
ctx.beginPath();
ctx.moveTo(oldx,oldy);
ctx.lineTo(newx,newy);
ctx.strokeStyle =
ctx.lineWidth =
ctx.lineCap = "round";
ctx.stroke();
function copyimage(event)
var img_png_src = canvas.toDataURL("image/png"); //将画板保存为图片格式的函数
document.getElementById("image_png").src = img_png_
以上就是本文的全部内容，希望对大家的学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具在canvas上实现3D效果
访问地址：http://www.cnblogs.com/shawn-xie/archive//2642553.html
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&lesson1-by-shawn.xie&/title&
&!--引入Three.js--&
&script src="Three.js"&&/script&
&style type="text/css"&
div#canvas-frame{
border: none;
cursor: move;
width: 1400px;
height: 600px;
background-color: #EEEEEE;
&!--盛放canvas的容器--&
&div id="container"&&/div&
准备和画布框大小一致的领域用于WebGL绘制。 具体来说：
(1) body 标签中添加 id 为「canvas3d」的 div 元素。
(2) style 标签中指定 「canvas3d」的CSS样式。
需要注意的是，我们并不需要写一个&canvas&标签，我们只需要定义好盛放canvas的div就可以，canvas是three.js动态生成的！
下面我们开始写脚本，我们将通过以下五步构建一个简单的立体模型，这也是three.js的基本步骤：
1.设置three.js渲染器
三维空间里的物体映射到二维平面的过程被称为三维渲染。 一般来说我们都把进行渲染操作的软件叫做渲染器。 具体来说要进行下面这些处理。
(0) 声明全局变量（对象）；
(1) 获取画布「canvas-frame」的高宽；
(2) 生成渲染器对象（属性：抗锯齿效果为设置有效）；
(3) 指定渲染器的高宽（和画布框大小一致）；
(4) 追加 【canvas】 元素到 【canvas3d】 元素中；
(5) 设置渲染器的清除色(clearColor)。
//开启Three.js渲染器
var//声明全局变量（对象）
function initThree() {
width = document.getElementById('canvas3d').clientW//获取画布「canvas3d」的宽
height = document.getElementById('canvas3d').clientH//获取画布「canvas3d」的高
renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
2.设置摄像机camera
OpenGL（WebGL）中、三维空间中的物体投影到二维空间的方式中，存在透视投影和正投影两种相机。 透视投影就是、从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。 正投影就是不管物体和视点距离，都按照统一的大小进行绘制、在建筑和设计等领域需要从各个角度来绘制物体，因此这种投影被广泛应用。在 Three.js 也能够指定透视投影和正投影两种方式的相机。 本文按照以下的步骤设置透视投影方式。
(0) 声明全局的变量（对象）；
(1) 设置透视投影的相机；
(2) 设置相机的位置坐标；
(3) 设置相机的上为「z」轴方向；
(4) 设置视野的中心坐标。
　　　　　　　 //设置相机
function initCamera() {
camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
camera.position.x = 0;//设置相机的位置坐标
camera.position.y = 50;//设置相机的位置坐标
camera.position.z = 100;//设置相机的位置坐标
camera.up.x = 0;//设置相机的上为「x」轴方向
camera.up.y = 1;//设置相机的上为「y」轴方向
camera.up.z = 0;//设置相机的上为「z」轴方向
camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
3.设置场景scene
场景就是一个三维空间。 用 [Scene] 类声明一个叫 [scene] 的对象。
　　　　　　　　//设置场景
function initScene() {
scene = new THREE.Scene();
4.设置光源light
OpenGL（WebGL）的三维空间中，存在点光源和聚光灯两种类型。 而且，作为点光源的一种特例还存在平行光源(无线远光源)。另外，作为光源的参数还可以进行 [环境光] 等设置。 作为对应， Three.js中可以设置 [点光源(Point Light)] [聚光灯(Spot Light)] [平行光源(Direction Light)]，和 [环境光(Ambient Light)]。 和OpenGL一样、在一个场景中可以设置多个光源。 基本上，都是环境光和其他几种光源进行组合。 如果不设置环境光，那么光线照射不到的面会变得过于黑暗。
本文中首先按照下面的步骤设置平行光源，在这之后还会追加环境光。
(0) 声明全局变量(对象)
(1) 设置平行光源
(2) 设置光源向量
(3) 追加光源到场景
这里我们用「DirectionalLight」类声明一个叫 [light] 的对象来代表平行光源
　　　　　　　　//设置光源
function initLight() {
light = new THREE.DirectionalLight(0xff, 0);//设置平行光源
light.position.set( 200, 200, 200 );//设置光源向量
scene.add(light);// 追加光源到场景
5.设置物体object
这里，我们声明一个球模型
　　　　　　　　//设置物体
function initObject(){
sphere = new THREE.Mesh(
new THREE.SphereGeometry(20,20),
//width,height,depth
new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
scene.add(sphere);
sphere.position.set(0,0,0);
最后，我们写一个主函数执行以上五步：
　　　　　　　　//执行
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
这时，测试以上程序，你会发现浏览器窗口中出现了你绘制的球形模型：
以上就是three.js的入门内容，我们核心的五步就是：
1.设置three.js渲染器
2.设置摄像机camera
3.设置场景scene
4.设置光源light
5.设置物体object
Unity实现在3D模型上涂鸦
7 款基于 HTML5 Canvas 的超炫 3D 动画效果
qml canvas3D 加载界面速度非常慢的解决方法
基于 HTML5 Canvas 的 3D 机房创建
基于HTML5 Canvas 点击添加 2D 3D 机柜模型
基于 HTML5 Canvas 的 3D 模型贴图问题
Canvas学习：Canvas里的坐标系统
【js学习笔记-112】------&canvas&坐标系变换
Unity3D实践系列10, Canvas画布的创建和使用
基于 HTML5 Canvas 的简易 2D 3D 编辑器
没有更多推荐了，HTML5+Canvas漂亮的3D烟花动画特效
作者/代码整理：&&(转载请附加本文地址，带有“懒人原生”字样的谢绝转载) 发布日期：
一款非常漂亮的基于HTML5+Canvas实现的放烟花特效，地面旋转，夜空3D烟花动画特效。
猜你喜欢...
HTML5+Canvas漂亮的3D烟花动画特效
亲，普通会员无权限下载，
升级VIP会员任意下载
（包月才10元）或联系QQ人工充值
亲，vip会员免费下载全站
充值方式： 或联系QQ人工充值当前位置 :
3D云效果，叼炸天！可用鼠标控制方向！本地要localhost才能正常演示
0粉丝/0关注
[声明]本站素材来自用户分享，仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ：给予处理。
举报原因：
&&垃圾广告
&&淫秽色情
&&虚假中奖
&&敏感信息
&&人身攻击
&&骚扰他人
下载该资源用户也下载了
使用邮箱登录17素材
已连续签到1天,签到3天将获得积分VIP1天纸飞机许愿
前端路上，一路有你。编辑你的正能量，快乐工作，努力生活~
请选择弹奏的曲谱
点击开始录制，可以录制弹奏的曲子
分享钢琴节奏：