SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让Canvas可享用到现有丰富的SVG素材，并不失SVG矢量无级缩放的特点。
《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果，但你也可以直接拖拽SVG格式的图片进行显示，只不过普通图片的格式数据为data:...
绘制多圆2016年5月24日12:12:26绘制一定数目(num)颜色随机的小圆，围成一个大圆。根据num完全自动生成，且小圆自动均分大圆路径（num≥20）。效果：前置技能：(1).Canvas(2).勾股定理、余弦定理、斜率方程、象限、角度与弧度转换等数学知识HTML：<canvas id="canvas" width="900" height="680">您的浏览器太老，请使用新版谷歌或火狐浏览器访问！</canvas>
<script src="canvas_circle.js"></script>
JS：/*** Created by suwt on ...
css样式： <style> body{ text-align: center; } canvas{ background:#ddd; } </style>body中添加标签canvas： <canvas id="c3"></canvas>js： //创建两个变量保存验证码的宽度和高度 var w = 120; var h = 30; //将变量值赋值给canvas c3.width = w; c3.height = h; //获取画笔 var ctx = c3.getContext("2d");...
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>div{padding:20px;}</style>
</head>
<body style="overflow:hidden;"><script>var starsAnim = {init:function(){canvas = document.createElement("canvas");ctx = canvas.getContext("2d");W = window.innerWidth;H = window.innerHeight;canvas.width = W;canvas.height = H;document.body.appendChild(canvas);var star = oneStar.init(...
效果图： 知识点：1、context.beginPath();2、context.closePath();3、context.Rect(x,y,width,heght); context.fllRect(x,y,width,heght); context.strokeRect(x,y,width,heght);<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>*{padding: 0;margin: 0;}#canvas{border:1px solid #ccc;}</style></head><body><canvas id="canvas">您的浏览器不支持</canvas></body><script>var canvas=docume...
<canvas id="canvas" width="600" height="500" style="background-color: yellow;"></canvas> 复制代码代码如下: var canvas=document.getElementById("canvas"); var cxt=canvas.getContext("2d"); var img=new Image(); img.src="cat.jpg"; cxt.drawImage(img,10,10,490,382); /* 测试发现一个问题 在浏览器第一次执行的时候经常看不到图片, 在刷新一次后才能看到图片,有谁知道这是什么原因的,麻烦大神告诉我...
最近在学习HTML5，发现canvas真的很棒，canvas元素是一种可供绘图的平面，我们用JavaScript对它进行配置和操作。我这里说一下arc方法绘制圆弧，顺便提一下涉及到的基础知识。首先看这段代码： var ctx=document.getElementById("canvas").getContext("2d");/*这是调用HTMLCanvasElement对象的getContex方法，为画布返回绘图上下文，这里是采用2d上下文 ctx.fillStyle="yellow"; ctx.strokeStyle="black";/*这两句代码...
一、绘制复杂形状或路径 在简单的矩形不能满足需求的情况下，绘图环境提供了如下方法来绘制复杂的形状或路径。 beginPath() ： 开始绘制一个新路径。 closePath() ： 通过绘制一条当前点到路径起点的线段来闭合形状。 fill() ， stroke() ： 填充形状或绘制空心形状。 moveTo() ： 将当前点移动到点(x,y)。 lineTo() ： 从当前点绘制一条直线到点(x,y)。 arc(x,y,r,sAngle,eAngle,counterclockwise) ： 绘制一条指定半径的弧到点(x...
window.onload=function(){ var clock=document.getElementById("clock").getContext(‘2d‘);//通过获取canvas元素获取2d上下文 var width=clock.canvas.width;//得到画布的宽度 var height=clock.canvas.height;//得到花布的高度 var r=width/2;//得到将要画的时钟的半径 var prop=width/150;//在此保留比例，以便于在更换画布大小时调节 function outline(){ clock.save();//保存当前状态 cloc...
最近想弄一个网页，把自己学HTML5过程中做的部分DEMO放上去做集合，但是，如果就仅仅做个网页把所有DEMO一个一个排列又觉得太难看了。就想，既然学了canvas，那就来折腾下浏览器，做个小小的开场动画吧。开场动画的效果，想了一会，决定用粒子，因为觉得粒子比较好玩。还记得以前我写的第一篇技术博文，就是讲文字图片粒子化的：文字图片粒子化 ， 那时就仅仅做的是直线运动，顺便加了一点3D效果。运动公式很简单。所以就想这个开场...
<!DOCTYPE html>
<html lang=‘zh-cn‘>
<head>
<title>Insert you title</title>
<meta name=‘description‘ content=‘this is my page‘>
<meta name=‘keywords‘ content=‘keyword1,keyword2,keyword3‘>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel=‘stylesheet‘ type=‘text/css‘ href=‘./css/index.css‘ />
<script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js...
canvas的创建分为两种 一种是在html页面中创建 <Canvas class="canvas" width="200px" height="200px"></canvas> 一种是在js文件中用js脚本创建 var canvas_widht=200, canvas_height=200;windows.onload=function(){ }function createCanvas(){ document.body.innerHTML="<canvas id=\"mycanvas"\width=\""+canvas_widht+" height=\""+canvas_height+"\"></canvas>"} js脚本创建会让你更装bi 但是 ...
笛卡尔的心形线桃心形这个桃心比较符合口味。。遂决定使用此方程。。当然还有一些其它方程，如下：下面就开始写程序了.<!DOCTYPE html> <html> <head> <title>Draw Heart</title> <style type="text/css"> * { margin: 0; padding: 0; } html { height: 100%; margin: 0; } body { height: 100%...
在见识了html5中canvas的强大，笔者准备制作一个简易时钟。 下面就是成果啦，制作之前我们先分析一下，绘制一个时钟需要做哪些准备。一 、1.首先这个时钟分为表盘，指针（时针，分针，秒针）和数字三部分。2.表盘是个圆，这个简单。3.绘制指针时，需要先获取到系统时间，然后找到时间和角度的关系。4.然后利用画圆函数，把起始和终点设为同一角度，即可画出射线（指针）。 二、接下来，我们再分析一下，绘制时钟需要用到的函数...
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>canvas绘制钟表</title><style type="text/css">#canvas{/*border: 2px solid red;*/display: block;margin: 0 auto;}</style></head><body><canvas id="canvas" width="600" height="600"></canvas></body><script type="text/javascript">var canvas=document.getElementById(‘canvas‘);var ctx=canvas.getContext(‘2d‘);//通过平移和旋转改变画笔的原始坐标位置和...
