canvas元素 | 易学教程

3.canvas与svg的区别

阅读更多关于 3.canvas与svg的区别

canvas是通过javascript来绘制的2D图形 canvas是控制像素来渲染的一旦渲染完成，浏览器就不会关注了，如果位置发生变化，整个场景就需要重新绘制 <canvas id="mycanvas" width="500" height="300" ></canvas> <script type="text/javascript"> var c=document.getElementById("mycanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); // 画了一条线 cxt.moveTo(160,0) cxt.lineTo(160,90) cxt.stroke() // 画一个圆 cxt.fillStyle="#FF0000" cxt.beginPath(); cxt.arc(200,100,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); // 图像 var img=new Image() img.src="./video/QQ图片20190529164332.jpg" cxt.drawImage(img,100,100) </script> Svg是使用xml描述的2D图形也就意味着 svg

canvas字符雨 - JavaScript实现

阅读更多关于 canvas字符雨 - JavaScript实现

canvas字符雨字符雨效果分析如何实现字符雨从上往下逐渐消失：这是 canvas 每次画字符的时候就画一遍黑色背景，但是这个背景是有透明度的，并且这个黑色背景的透明度还比较小，只有零点零八（经过测试，0.08比较合适，也可以更改查看效果）；字符是从上往下落，上面的字符先出现，下面的字符后出现，程序重复地画黑色背景，就算有透明度，叠加起来，上面的字符就会先被覆盖，下面的后出现的字符还是还比较明显，就形成了逐渐消失的效果。只有其中一些列出现了字符：如果不加以控制的话，那么 canvas 中每一列都会出现字符，不会出现参差不齐的效果。所以用一个代表出现机率的数来控制，当字符落到 canvas 的底部，并且拿一个随机数和出现机率进行比较，如果随机数大于其，那么这一列就可以从顶部再次出现字符，否则这一列在本次循环就不会出现字符，只有等待下次循环再次拿随机数来比较。这样就实现了有一些列出现字符，而另一些不出现字符的效果。创建实例 let charRain = new CharRain ( "canvas_id" ) ; HTML结构 < canvas id = " canvas " > </ canvas > CSS代码 body { margin : 0 ; padding : 0 ; overflow : hidden ; } #canvas {

canvas使用

阅读更多关于 canvas使用

基本步骤类似于步骤1准备画布准备画布 <canvas></canvas>标签就是画布 canvas画布有默认大小默认350X150 设置canvas画布大小通常canvas是一个标签，可以在style canvas{width:xxxpx; height:xxpx} 但是不建议这样写不建议在样式设置尺寸我们可以在元素本身来设置 <canvas width="600" height="400"></canvas> 解释：不在样式表中设置canvas画布大小的原因在css中设置canvas尺寸 canvas{ border:1px solid black; width: 600px; height: 400px; } 同样类似下面在(100,100)的位置绘制一条直线此时可以发现原来300X150的框拉伸到600X400，同样原来100X100的点距离左边和上边同比例放大了。就好比于拉伸了图片，点的相对比例没变，而实际位置改变。所以在css样式中我们设置canvas的样式，而不是canvas的大小步骤2准备绘制工具，利用工具绘图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

巧用canvas实现画板功能，使用画笔在图片上涂画，橡皮擦可擦除涂画，并保存

阅读更多关于巧用canvas实现画板功能，使用画笔在图片上涂画，橡皮擦可擦除涂画，并保存

canvas 是HTML5的元素，使用JavaScript 在网页上绘制图像。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。而如果想实现画笔在画板涂画画笔在图片上涂画，橡皮擦可擦除涂画，就需要两个canvas画布配合。原理就是两个一样大小的canvas画布重叠放置，并且都绘制这个图画，这样只在上面的canvas涂画、擦除，擦除时把下层canvas内容替换上层的canvas内容，达到模仿橡皮擦效果。下面就是具体实现代码： 1、先准备画布和工具： <canvas id="canvas1" width="600" height="500"></canvas> <canvas id="canvas2" width="600" height="500"></canvas> <div class="tooltip-pen"> <b> <i class="ico ico-pen" title="铅笔" onclick="changeTools('pen');"></i> <i class="ico ico-eraser" title="橡皮檫" onclick="changeTools('eraser');"></i> <i class="ico ico-save" title="保存" onclick="downloadImg();"></i> </b> <

Canvas图形绘画标签

阅读更多关于 Canvas图形绘画标签

Canvas图形绘画标签 canvas定义 canvas标签用来定义图形，是一个图形容器，常常用来进行绘图操作，要与js搭配使用。创建一个画布容器 width,height定义画布容器大小 < canvas id = " myCanvas " width = " 500 " height = " 400 " style =" border : 1px solid #000 " > </ canvas > canvas本身没有绘图能力，绘图操作要在js里进行通过js获取canvas元素对象 var canvas = document.getElementById("myCanvas") 创建context对象，context对象拥有多种绘制方法，一般通过调用获取的canvas元素对象下的方法 var cxt = canvas.getContext("2d") 实例线条 //开始一条路径 ctx.beginPath(); //将画笔移动到指定起始坐标点上 ctx.moveTo(100,100); //添加一个点，创建从上一个点到该点的线条 ctx.lineTo(300,100); ctx.lineTo(100,200); //创建起始坐标点到最终坐标点的路径 ctx.closePath(); //执行绘制 ctx.stroke(); 实例矩形 rect(x,y,width

Canvas + JS 实现简易的时钟

阅读更多关于 Canvas + JS 实现简易的时钟

之前学习了下html5中的canvas元素，为了练练手就实现了一个简易的时钟。时钟本身并不复杂，也没有使用图片进行美化，不过麻雀虽小五脏俱全，下面就与大家分享一下：实现效果： html代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <style type="text/css"> *{ margin: 0; padding: 0; } .canvas{ margin-left: 20px; margin-top: 20px; border: solid 1px; } </style> </head> <body onload= "main()"> <canvas class = "canvas" id="canvasId" width = '500px' height = '400px'></canvas> <script type= "text/javascript" src = "Clock.js"></script> </body> </html> JS代码: var Canvas = {}; Canvas.cxt = document.getElementById(

canvas 简介

阅读更多关于 canvas 简介

Canvas的概述定义 <canvas> 是H5新增的标签 canvas提供给了 javascript 绘图接口 canvas绘图建立在坐标系上应用领域炫酷特效、banner 可视化数据（图表）游戏大型应用（地图）在线系统（在线PS ） canvas标签属性 width 属性 height 方法 getContext() 可选的参数 "2d" / "webgl" 返回上下文环境绘图环境该对象提供API，让JavaScript来绘制图形绘图基础路径的开启和闭合 beginPath() 开启路径 closePath() 关闭路径（把路径闭合）设置起点 moveTo(x, y) 画线 lineTo(x , y) 绘制直线描边 lineWidth 属性设置描边线的粗细 strokeStyle 属性设置描边颜色 stroke() 绘制填充 fillStyle 属性填充颜色 fill() 执行填充快速矩形 rect(x, y, width, height) 绘制矩形路径 strokeRect(x, y, width, height) 描边矩形 fillStroke(x, y, width, height) 填充矩形 clearRect(x, y, width. height) 清除矩形（可以用来清除屏幕）圆弧 arc(x, y, radius,

HTML5 Canvas标签及基本使用

阅读更多关于 HTML5 Canvas标签及基本使用

< canvas>定义图形基于状态进行绘制的大多数 Canvas 绘图 API 都没有定义在 < canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上 canvas . width canvas . height //指定canvas的宽高 canvas . getContext ( "2d" ) ; //返回绘制的环境 context . moveTo ( 10 , 10 ) //从（10，10）开始画 context . lineTo ( 100 , 100 ) //从（10，10）开始画，画到（100，100） context . stroke ( ) //开始绘制（线条） context . lineWidth = 3 //设置线条的宽度 context . strokeStyle = "#f00" 设置线条的颜色 stroke笔画的意思 context . fillStyle = "rgb(255,0,0)" ；context . fill ( ) //着色，，填充的颜色（颜色块） context . beginPath ( ) ; //定义一个新的路径 context . closePath ( ) ; //用在路径结束，如果绘制的路径不是封闭的则会自动封闭起来，不写closrPath则不会封闭 //从坐标

Canvas实现雨滴效果

阅读更多关于 Canvas实现雨滴效果

主要思路：创建canvas元素；注意： canvas并不是所有部分都能绘制图形，它像一个国画卷轴一样，可绘制部分只有宣纸部分。如果需要canvas画布局域填充整个cnavas宽高，需要进行设置。 canvas是行内元素。行内元素如果等于浏览器宽高的话，会使浏览器出现滚动条，因为行内元素有行高，设置为块级元素即可。 canvas有默认的宽高（300*150）获取canvas元素，并设置canvas宽高等于整个浏览器窗口宽高；获取浏览器窗口的大下(宽高) window.innerWidth; window.innerHeight; 当浏览器窗口宽高发生改变时，也需要重新设置canvas宽高； window.onresize = function(){}；监听浏览器窗口的变化，在浏览器窗口变化的时候，执行获取浏览器窗口大小的方法，并给canvas进行重新赋值。实现会动的图形。向下播放多张静态的图片。一秒内要大于屏幕刷新的帧数(60) 也就是每隔1/60s执行一次函数在每次绘制的正方形上添加一个背景色为白色蒙板。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML5的十大新特性

阅读更多关于 HTML5的十大新特性

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者，等 (1)语义标签语义化标签使得页面的内容结构化，见名知义标签描述 <hrader></header> 定义了文档的头部区域 <footer></footer> 定义了文档的尾部区域 <nav></nav> 定义文档的导航 <section></section> 定义文档中的节（section、区段） <article></article> 定义页面独立的内容区域 <aside></aside> 定义页面的侧边栏内容 <detailes></detailes> 用于描述文档或文档某个部分的细节 <summary></summary> 标签包含 details 元素的标题 <dialog></dialog> 定义对话框，比如提示框 (2)增强型表单 HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。输入类型描述 color 主要用于选取颜色 date 从一个日期选择器选择一个日期 datetime 选择一个日期（UTC 时间） datetime-local 选择一个日期和时间 (无时区) email 包含 e-mail 地址的输入域

订阅 canvas元素