整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
着建站技术的快速进步，Html5逐渐被应用于电商平台中，一个支持动态交互、响应式处理页面的企业电商平台可以大大提升访问者的用户体验，尤其是自适应的页面可以让企业大大节省运营成本的情况下，兼容所有访问终端，以实现全网营销。
很多企业想要html5网站，但是限于成本和技术能力，大多数企业是无力承担html5建站的费用的。想做一个html5网站，功能要强大、界面要美观，企业能不能自己搞，也就是我们开篇所提到的，零基础如何做html5企业网站。
零基础做html5网站之前，我们需要准备一款专门制作html5页面的建站工具——建站宝盒。这是一款企业级自助建站系统，支持可视化鼠标拖拽建站，也就是我们常说的会打字就会建站的工具，值得庆幸的是它支持html5的建站，一起来看看教程。
第一步、登录建站宝盒自助建站系统的后台（去耐思尼克官网上申请即可，过程不再赘述），如图所示：
第二步、在左侧导航栏依次点击电脑网站-更换模版，选一套你喜欢的自适应模版，点击安装即可，自适应模版就是我们常说的html5模版。
第三步、安装很简单，无需进行任何操作，一键成功的，点击立即前往就能进入可视化鼠标拖拽界面。
第四步、在可视化界面下，你可以通过左侧的导航栏选择你喜欢的任意样式，用鼠标拖拽到任意位置进行设计，而且每一个模块都可以设置任意动画效果。
第五步、通过系统提供的模块和动画效果，你可以组合成上千种网站界面风格，体验html5的动态和响应式，当然你也可以设置平板和手机模式下的展示效果。
第六步、点击发布之后，html5网站就搞定了，不过在发布之前，最好对你的网站和栏目进行系统的seo优化，让他符合搜索引擎的收录标准，这样的网站运营起来才简单。
零基础建html5网站借助建站工具是不是很方便就能搞定呢？这款建站系统是笔者接触那么多建站系统中唯一满意的。功能十分强大并且支持商城功能，html5网站模板也十分丰富，有上千套之多，想要做html5网站，且不懂技术还想做高大上的html5网站的亲们，来试试吧。建站宝盒html5建站系统下载:http://www.iisp.com/design/
更多建站&互联网行业资讯，敬请关注微信公众号：耐思尼克（iisp-com）
作为产品经理，每天都会和不同方向的开发进行交流，实际工作证明，产品经理懂技术确实有沟通上的优势，本人也在工作至之余恶补了一些前端的技术知识，前几天分享过WEB前端教学资料，记你再奉上HTML5的全套教学资料和教学案例，不管你是产品还是技术或者是其他对前端感兴趣的人，都可以下载了解学习，废话不多说，还是老规矩，私信回复关键字“Html5”便可获得下载链接，一定是关键字哦，注意区分大小写～～～～否则链接可能无效，以下为部分资料截图，请参考：
第一部分截图
第二部分截图
html5Canvas的知识点，是开发的必备技能，在实际工作中也常常会涉及到。
最近熬夜总结html5Canvas相关的知识点，大家一起看一下吧：
Canvas使用的场景有：1，动画；2，H5游戏；3，图表。
效果动画，加载Loading:
H5游戏效果：
对于Canvas需要掌握：
Canvas坐标体系
画直线，矩形和原型
beginPath和closePath
描边和填充样式
Canvas中的图形变换，渐变，文字和图片
Canvas中的图形变换
图形变换都是针对坐标系来说的：
save和restore
用来保存和恢复上下文的环境ctx，一般成对出现
Canvas中的渐变
(xStart,yStart)是线段的起点，(xEnd,yEnd)是线段终点。起点到终点之间的颜色呈渐变。
ctx.createRadialGradient(xStart,yStart, radiusStart,xEnd,yEnd,radiusEnd);
(xStart,yStart)是第一个圆的原心，radiusStart是第一个圆的半径，(xEnd,yEnd)是第二个圆的原心，radiusEnd是第二个圆的半径
第一圆到第二个圆之间的颜色呈现渐变。
Canvas中的文字
描边文字：ctx.strokeText(text,x,y)
填充文字：ctx.fillText(text,x,y);
设置字体样式：ctx.font
设置垂直对齐方式：ctx.textBaseline
Canvas图片
绘制图片3种方法
在image加载完成之后绘制：
示例：
var img = new Image();img.src = 'logo.png';img.onload = function() { ctx.drawImage(img,0,0,40,40,0,0,80,80);}Canvas绘制
Canvas图形画刷
ctx.createPattern可以创建一个画刷模式，进而可以设置到fillStyle里，进行画刷的填充。
type取值:
Canvas像素操作
var imageData = ctx.getImageData(x,y,w,h)返回的是一维数组：[r1,g1,b1,a1,r2,g2,b2,a2...]ctx.putImageData(imageData,x,y)把imageData放在(x,y)处ctx.putImageData(imageData, x, y, dirtyX, dirtyY, dirtyW, dirtyH)只显示（dirtyX,dirtyY）处的宽dirtyW,dirtyH的区域Canvas阴影绘制
Canvas剪辑区域
Canvas绘制曲线
狐线：
context.arc(x,y,radius, starAngle,endAngle, anticlockwise)圆心(x,y) 半径radius从starAngle到endAngleanticlockwise代表是否逆时针方向生成工具
Canvas Quadratic Curve Example
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
二次样条曲线：
context.quadraticCurveTo(qcpx,qcpy, qx,qy)贝塞尔曲线：
context.bezierCurveTo(cp1x,cp1y, cp2x, cp2y, x,y)清除(x,y)点起， 宽width,高height的区域，用于重新绘制
离屏技术是什么：通过在离屏Canvas中绘制元素，再复制到显示Canvas中，从而大幅提高性能的一种技术。
使用离屏技术：
离屏技术：
一个Canvas中的图形绘制到另一个Canvas方法：
ctx.drawImage(canvas,x,y),该方法把canvas绘制在(x,y)处ctx.drawImage(canvas,x,y, w,h),该方法把canvas绘制在(x,y)处，并缩放为宽w,高hctx.drawImage(canvas, sx, sy, sw, sh, dx, dy, dw, dh)，该方法把canvas中（sx, sy）处的宽sw,高sh的区域，绘制到(dx,dy)处，并缩放为宽dw, 高dh对canvas插件的相关了解
什么是Canvas插件，掌握Chart.js插件，了解Chartist.js和HighCharts.js插件
（图表）Chart.js插件：https://www.chartjs.org/
Chartist.js插件是一个简单的响应式图表插件：支持SVG格式（http://gionkunz.github.io/chartist-js/）
HighCharts.js插件：方便快捷的HTML5交互性图标库：https://www.highcharts.com/
Chartist.js插件与HighCharts.js插件
响应式布局，它的用户体验友好，响应式网站可以根据不同终端，不同尺寸和不同应用环境，自动调整界面布局，展示内容，提供非常好的视觉效果。响应式布局就是一个网站能够兼容多个终端
示例：
<style>#canva { border: 1px solid red;}</style><div><canvas id="canva" width="200" height="200"></canvas>// 绘制宽高200的canvas</div>在开始绘图时，先要获取Canvas元素的对象，在获取一个绘图的上下文。
获取Canvas对象 ,使用document对象的getElementById()方法获取。
var canvas = document.getElementById("canvas")可以使用通过标签名称来获取对象的getElementsByTagName方法使用getContext()方法来获取
var context = canvas.getContext("2d")context.font="98px 黑体"; // 文字样式context.fillStyle="red"; // 文字颜色context.textAlign = "center"; // 文字对齐方式// 绘制文字context.fillText("达达前端"，100, 123, 234);绘制图像：
使用drawImage()方法可以将图像添加到Canvas画布中，绘制一幅图像，需要有三个重载的方法：
使用：
drawImage(image, x, y) // 在画布上定位图像// 方法在画布上绘制图像、画布或视频。// 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。drawImage(image, x, y, width, height)// 在画布上定位图像，并规定图像的宽度和高度drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)// 剪切图像，并在画布上定位被剪切的部分参数：
参数描述image规定要使用的图像，画布或视频sourceX开始剪切的x坐标位置sourceY开始剪切的y坐标位置sourceWidth被剪切图像的宽度sourceHeight被剪切图像的高度destX在画布上放置图像的 x 坐标位置destY在画布上放置图像的 y 坐标位置destWidth要使用的图像的宽度destHeight要使用的图像的高度
插入图像：
function Draw() { // 获取canvas对象 var canvas = document.getElementById("canvas"); // 获取2d上下文绘图对象 var context = canvas.getContext("2d"); // 使用Image()构造函数创建图像对象 var newImg = new Image(); // 指定图像的文件地址 newImg.src = "../images/dadaqianduan.jpg"; newImg.onload = function () { // 左上角开始绘制图像 context.drawImage(newImg, 0, 0); context.drawImage(newImg, 250, 100, 150, 200); context.drawImage(newImg, 90, 80, 100, 100, 0, 0, 120, 120); }}在Canvas中绘制文字“达达前端”:
// canvas 宽高200<canvas id="canvas" width="200" height="200"></canvas><style type="text/css">canvas { border: 2px solid #ccc;}</style><script> // 获取canvas var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 设置字体 context.font="98px 黑体"; // 填充 context.fillStyle="#036"; // 文本水平位置 context.textAlign="center"; // 执行绘制 context.fillText("达达前端",100, 120, 200);</script>两个方法：
绘制矩形边框，使用strokeStyle方法：
// 绘制矩形边框strokeRect(x,y, width, height);填充矩形区域，使用fillRect()方法：
// 填充矩形区域fillRect(x,y,width,height);绘制矩形
// 绘制矩形function drawRect() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 描边 context.strokeStyle = "#000"; // 线条宽度 context.lineWidth = 1; // 矩形边框 context.strokeRect(50,50, 150, 100); // 填充 context.fillStyle="#f90"; // 矩形 context.fillRect(50,50,150,100);}window.addEventListener("load",DrawRect,true);使用clearRect方法，可以擦除指定的矩形区域：
// 擦除指定的矩形区域context.clearRect(x,y,width,height)在实际开发中，画布是默认300*150的大小。
示例：
// 为画布设置边框canvas { border: 1px solid #ccc;}// 准备画布，默认是300*150// 设置画布的大小<canvas width="1200" height="800"></canvas>// 准备绘制工具<script>// 获取元素var myCanvas = document.querySelector('canvas');// 获取上下文，绘制工具箱var ctx = myCanvas.getContext('2d');// 移动画笔ctx.moveTo(100,100);// 绘制直线，轨迹ctx.lineTo(200,100);// 描边ctx.stroke()向 HTML5 页面添加 canvas 元素
// 规定元素的 id、宽度和高度<canvas id="myCanvas" width="200" height="100"></canvas>图形绘制
需要理解些概念：
设置样式
矩形绘制
圆弧绘制
绘制文本
绘制图片
坐标变换
创建绘图路径
使用方法：beginPath()和closePath()，分别表示开始一个新的路径和关闭当前的路径
closePath方法关闭当前路径
绘制网格，网格大小
var grid = 10;// 画多少条x轴方向的线，横向的条数，画布的高度var canvasHeight = myCanvas.heightvar canvasWidth = myCanvas.width// 画布宽高ctx.canvas.widthctx.canvas.height// 网格大小var gridSize = 10;var canvasHeight = ctx.canvas.height;var xLineTotal = canvasHeight / gridSize// 总线条var xLineTotal = Math.floor(canvasHeight / gridSize);for (var i=0; i<=xLineTotal; i++) { ctx.beginPath(); ctx.moveTo(0, i*gridSize-0.5); ctx.lineTo(canvasWidth, i*gridSize-0.5); ctx.strokeStyle='#eee'; ctx.stroke();}// 画多少条y轴方向的线var yLineTotal = canvasWidth / gridSizevar yLineTotal = Math.floor(canvasWidth / gridSize);for (var i=0; i <= yLineTotal; i++) { ctx.beginPath(); ctx.moveTo(i*gridSize-0.5,0); ctx.lineTo(i*gridSize-0.5,canvasHeight); ctx.strokeStyle='#eee'; ctx.stroke();}绘制坐标系，确定圆点，确定离画布旁边的距离，确定坐标轴的长度，确定箭头的大小，绘制箭头填充。
// 绘制坐标系var space = 20;var arrowSize = 10;// 画布宽高var canvasWidth = ctx.canvas.width;var canvasHeight = ctx.canvas.height;// 坐标系var x0 = space;var y0 = canvasHeight - space;// 绘制x轴ctx.moveTo(x0,y0);ctx.lineTo(canvasWidth-space, y0);ctx.stroke();// 箭头ctx.lineTo(canvasWidth-space-arrowSize, y0 + arrowSize/2);ctx.lineTo(canvasWidth-space-arrowSize, y0 - arrowSize/2);ctx.lineTo(canvasWidth-space, y0);ctx.fill();ctx.stroke();// 绘制y轴ctx.beginPath();ctx.moveTo(x0, y0);ctx.lineTo(space, space);ctx.stroke();// 箭头ctx.lineTo(space+space-arrowSize/2, space + arrowSize);ctx.lineTo(space-space-arrowSize/2, space - arrowSize);ctx.lineTo(space, space);ctx.fill();ctx.stroke();// 绘制点var coordinate = { x: 146, y: 356}// 点尺寸var dottedSize = 6;ctx.moveTo(coordinate.x - dottedSize/2, coordinate.y - dottedSize/2);ctx.lineTo(coordinate.x + dottedSize/2, coordinate.y - dottedSize/2);ctx.lineTo(coordinate.x + dottedSize/2, coordinate.y + dottedSize/2);ctx.lineTo(coordinate.x - dottedSize/2, coordinate.y + dottedSize/2);ctx.closePath();ctx.fill();arc方法和rect方法
arc创建一个圆形，rect创建一个矩形，最后调用stroke()方法和fill()方法
// 圆形context.arc(100,100,30,0,Math.PI*2,true);使用beginPath()方法可以新创建一个子路径，closePath()方法用来闭合路径的。
绘制两条直线
function DrawLine() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 创建绘制过程 context.beginPath(); context.moveTo(50,50); context.lineTo(120,120); context.lineTo(120,60); context.closePath(); context.strokeStyle="#000"; // 执行绘制 context.stroke();}如果不用beginPath()方法，绘制图形时不再创建子路径，第一次的图形在执行过程中会被绘制填充两次。
图形组合
属性 globalCompositeOperation 设置如何在画布上组合颜色
12中组合类型：
值说明copy只绘制新图形，删除其他所有内容darker在图形重叠的地方，颜色由两个颜色值相减后决定destination-atop已有的内容只在它和新的图形重叠的地方保留，新图形绘制在内容后destination-in在新图形和已有画布重叠的地方，已有内容都保留，所有其他内容成为透明destination-out在新图形和已有内容不重叠的地方，已有内容保留所有其他内容成为透明destination-over新图形绘制于已有内容的后面lighter在图形重叠的地方，颜色由两种颜色值的叠加值来决定source-atop只在新图形和已有内容重叠的地方才绘制新图形source-in在新图形和已有内容重叠的地方，新图形才会被绘制，所有其他内容成为透明source-out只在和已有图形不重叠的地方绘制新图形source-over新图形绘制于已有图形的顶部xor在重置和正常绘制的其他地方，图形都成为透明
绘制曲线
// 圆形，曲线arc(x, y, radius, startAngle, endAngle, counterclockwise);<style>// 画布背景颜色#canvas { background: #000;}</style>// 画布宽度400<canvas id="canvas" width="400" height="400"><script> var canvas = document.getElementById('canvas'); var context= canvas.getContext('2d') // 开始 context.beginPath(); // 绘制圆形 context.arc(100, 100, 50, 0, Math.PI*2, true); // 关闭 context.closePath(); // 填充颜色 context.fillStyle = 'rgb(255,255,255)'; context.fill();</script>如果使用css设置宽高，画布会按照300*150的比例进行缩放，将300*150的页面显示在400*400的容器中。
// 设置画布宽度var cx = canvas.width = 400;var cy = canvas.height = 400;使用js动态设置宽高。
建议使用HTML中的width和height，或者js动态设置宽高
创建一个canvas标签，第一步：
// 获取这个canvas的上下文对象var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');方法：
辅助线绘制弧线：arcTo() 方法
语法：
// 辅助线绘制弧线arcTo(x1, y1, x2, y2, radius)arcTo()方法绘制一条弧线
代码：
// 绘制一条弧线function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // 开始绘制 context.beginPath(); // 移动点 context.moveTo(80, 120); // 绘制线条 context.lineTo(150, 60); context.lineTo(180, 130); // 描边 context.strokeStyle="rgba(0,0,0,0.4)"; context.lineWidth=2; context.stroke(); context.beginPath(); context.moveTo(80,120); context.arcTo(150,60,180,130,50); context.strolkeStyle="rgba(255,135,0,1)"; context.stroke();}quadraticCurveTo()方法：
quadraticCurveTo(cpX, cpY, x, y);// cpX, cpY描述了控制点的坐标，x, y描述了曲线的终点坐标bezierCurveTo()方法：它是应用于二维图形应用程序的数学曲线。
bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y);// cp1X, cp1Y 表示第一个控制点的坐标 // cp2X, cp2Y 表示第二个控制点的坐标 // x, y表示曲线的终点坐标绘制曲线：
function draw() { // 绘制曲线 var canvas = document..getElementById('canvas'); var context = canvas.getContext('2d'); // 开始绘制 context.beginPath(); // 移动 context.moveTo(100,180); // 连线 context.lineTo(110,80); context.moveTo(260,100); context.lineTo(300,200); // 描边 context.strokeStyle="rgba(0,0,0,0.4)"; // 设置宽度 context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(100,180); // 绘制贝济埃曲线 context.bezierCurveTo(110,80,260,100,300,200); // 设置宽度 context.lineWidth = 3; context.strokeStyle="rgba(255,135,0,1)"; context.stroke();}var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');// 画布宽度200var canX = canvas.width = 200var canY = canvas.height = 200;// 开始绘制context.beginPath();// 四分之一圆context.arc(100, 100, 50, 0, Math.PI*0.5, false);context.strokeStyle="white"context.stroke();context.beginPath();context.lineTo(200, 200);context.lineTo(200, 100);context.lineTo(100,50);context.strokeStyle = '#fff';context.stroke();设置阴影，shadowBlur -context.shadowBlur = 20
gradient.addColorStop(stop,color)使用三种方法插入图像
function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // image实例 var newImg = new Image(); newImg.src='../images/dada.jpg' // 指定图像的文件地址 newImg.onload = function(){ // 绘图 context.drawImage(newImg, 0, 0); context.drawImage(newImg, 250,100, 150,200); context.drawImage(newImg, 90,80,100,100,0,0,120,120); }}在插入图像之前，需要考虑图像加载的时间，如果图像没加载完成就已经执行drawImage()方法，就不会显示任何图片。
提供了两种渐变的创建的方法：
// 创建线性渐变createLinearGradient()方法// 创建径向渐变createRadialGradient()方法设置渐变颜色和过渡方式
语法如下：
addColorStop(offset, color);function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') // 创建渐变对象，线性渐变 var grd = context.createLinearGradient(0,0,300,0) // 设置渐变颜色 grd.addColorStop(0, '#xxx'); // 设置颜色 grd.addColorStop(1, '#xxx'); // 设置颜色 // 将填充样式设置为线性渐变对象 context.fillStyle = grd; context.fillRect(0,0,300,80);}function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') // 径向渐变 var grd = context.createRadialGradient(50,50,0,100,100,90); // 设置渐变颜色以及方式 grd.addColorStop(0,'#xxx'); grd.addColorStop(1,'#xxx'); context.fillStyle = grd; context.beginPath(); // 圆形 context.arc(100,100,90,0,Math.PI*2,true); context.fill();}线帽属性：lineCap，表示指定线条的末端如何绘制值：lineCap: butt, round, square，当线条具有一定的宽度才能表现出来。
butt// 定义了线段没有线帽round// 定义了线段的末端为一个半圆形的线帽square// 定义了线段的末端为一个矩形的线帽线条的连接属性lineJoin，用于两条线条到的连接方式：
miter两条线段的外边缘一直延伸到它们相交，属性miterLimit是用来描述如何绘制两条线段的交点，是表示延伸长度和线条长度的比值。
默认为10，只有miter使用时有效
lineJoin = [value];round // 两条线段的外边缘应该和一个填充的弧结合bevel // 两条线段的外边缘应该和一个填充的三角形相交语法如下：
createPattern(image, repetitionStyle)function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') var img = new Image(); // 使用Image()构造函数创建图像对象 img.src='../images/xxx' // 指定图像的文件地址 img.onload = function() { // 绘图模式 var ptrn = context.createPattern(img, 'repeat'); // 填充样式 context.fillStyle = ptrn; // 填充矩形 context.fillReat(0,0,500,200); }}移动变化：
// 移动translate(dx,dy);// 绘制function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') // 设置移动偏移量 context.translate(200, 200); // 绘制一个圆形 ArcFace(context);}// 绘制一个圆形function ArcFace(context) { // 绘制一个圆形边框 context.beginPath(); // 绘制圆形 context.arc(0,0,90,0,Math.PI*2,true); // 线宽 context.lineWidth=5; // 描边 context.strokeStyle='#f90'; context.stroke(); // 绘制 context.beginPath(); context.moveTo(-30, -30); context.lineTo(-30, -20); context.moveTo(30, -30); context.lineTo(30, -20); context.moveTo(-20, 30); // 曲线 context.bezierCurveTo(-20, 44, 20, 30, 30, 20); context.strokeStyle='#000'; context.lineWidth=10; context.lineCap = 'round'; // 笑脸 context.stroke();}缩放变换，语法如下：
scale(sx, sy);// sx为水平方向上的缩放因子，sy为垂直方向上的缩放因子// 示例function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContent('2d') // 移动 context.translate(200,200); // 缩放 context.scale(0.5,0.5); ArcFace(context);}旋转变换：
rotate(angle)// 旋转例子function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d') context.translate(200,200); // 旋转 context.rotate(Math.PI/6); context.scale(0.5, 0.5) ArcFace(context)}矩形变形，语法如下：
transform(m1x,m1y,m2x,m2y,dx,dy); // 移动，缩放，旋转1. 移动translate (dx, dy)2. 缩放scale (sx,sy)3. 旋转rotate (A)*请认真填写需求信息，我们会在24小时内与您取得联系。
