html5 canvas基本用法
通过对canvas的初步了解，经过几天的总结，吧canvas的基本用法总结如下：方便以后查阅
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas 使用实例</title>
</head> <body style="padding:0; margin:0;" onLoad="draw()"> <canvas width="150" height="150" style=" border:1px solid #ccc;" id="canvas"></canvas> <script type="text/javascript">
function draw(){
var canvas = document.getElementById("canvas");//获取canvas元素
var ctx = canvas.getContext("2d");//定义canvas场景 /**基本形状的绘制**/
//绘制矩形
ctx.fillStyle = "rgb(200,0,0)";//填充颜色
ctx.fillRect(0,0,55,50);//绘制图形
ctx.fillStyle = "rgba(0,0,200,0.5)";//填充颜色带透明度
ctx.fillRect(30,30,55,50);//绘制图形
ctx.clearRect(30,30,55,50);//绘制空白的矩形
ctx.strokeRect(30,30,55,50);//绘制带边框的矩形 //按路径绘制图形
ctx.beginPath();//开始路径绘图
ctx.moveTo(75,50);//笔触起点
ctx.lineTo(100,75);//画直线
ctx.lineTo(100,25);//画直线
ctx.lineTo(75,50);//画直线(其实已经回到了起点)
ctx.closePath();//关闭路径(不关闭也可以,在填充的时候回字段闭合路径)
ctx.fill();//填充路径 //使用路径绘制一个笑脸(主要用到圆形画法)
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true);//ctx.arc(圆心横坐标,圆心纵坐标,半径,起始角度,终止角度,顺时针);
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true);
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true);
ctx.stroke(); //用路径画矩形
ctx.rect(75,75,50,50);
ctx.stroke(); //贝塞尔曲线,二次贝塞尔曲线,三次贝塞尔曲线.......... /**样式与色彩**/
//填充颜色与轮廓颜色
ctx.rect(75,75,50,50);
ctx.fillStyle = "rgb(200,0,0)";//填充颜色
ctx.fill();
ctx.strokeStyle = "orange";//轮廓颜色orange/#FFA500/rgb(255,165,0)/rgba(255,165,0,1)
ctx.stroke(); //画一个渐变效果的四色格
ctx.fillStyle = '#FD0';
ctx.fillRect(0,0,75,75);
ctx.fillStyle = '#6C0';
ctx.fillRect(75,0,75,75);
ctx.fillStyle = '#09F';
ctx.fillRect(0,75,75,75);
ctx.fillStyle = '#F30';
ctx.fillRect(75,75,75,75);
ctx.fillStyle = "#FFF";//填充颜色设置成白色
ctx.globalAlpha = 0.2;//设置透明度
for(var i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
ctx.fill();
} //画4个带有渐变的矩形
ctx.fillStyle = 'rgb(255,221,0)';
ctx.fillRect(0,0,150,37.5);
ctx.fillStyle = 'rgb(102,204,0)';
ctx.fillRect(0,37.5,150,37.5);
ctx.fillStyle = 'rgb(0,153,255)';
ctx.fillRect(0,75,150,37.5);
ctx.fillStyle = 'rgb(255,51,0)';
ctx.fillRect(0,112.5,150,37.5);
for(var i=0;i<10;i++){
ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
for(var j=0;j<4;j++){
ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
}
} /**绘制文本**/
ctx.font = "24px serif";//设置文本样式:font/textAlign/textBaseline/direction 文本测量
ctx.fillText("Hello Word",10,50);//实心文字
ctx.strokeText("Hello Word",10,50);//空心文字 /**强大的处理图片**/
//引入背景图片,并且以该图片作为背景进行绘图
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);//处理图像 0 0处开始绘制图像
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
};
img.src = "1.jpg";//引入图像的位置 //对图片进行缩放 比例不等
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0,150,150);
};
img.src = '1.jpg'; /**变形**/
//save 与 restore 图像的样式保存于内存(数据是以"堆"的方式保存到内存里面)
ctx.fillRect(0,0,150,150);
ctx.save();
ctx.fillStyle = '#09F';
ctx.fillRect(15,15,120,120);
ctx.save();
ctx.fillStyle = '#FFF';
ctx.globalAlpha = 0.5;
ctx.fillRect(30,30,90,90);
ctx.restore();
ctx.fillRect(45,45,60,60);//注意样式
ctx.restore();
ctx.fillRect(60,60,30,30);//注意样式 //移动 translate 移动基准点
ctx.fillRect(0,0,50,50);
ctx.translate(50,50);
ctx.fillRect(0,0,50,50); //还有旋转/缩放/变形 等更多操作,有待深入研究 /**更多高级操作请访问:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage**/
}
</script>
</body>
</html>
html5 canvas基本用法的更多相关文章
- HTML5 Canvas阴影用法演示
HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = “red” 表示设置阴影颜色为红色 context.sh ...
- 提高HTML5 canvas性能的几种方法
简介 HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的标准.许多开发者现在利 ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- HTML5 Canvas arc()函数//////////////////////(转)
HTML5 Canvas arc()函数 实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.get ...
- HTML5 Canvas arc()函数
实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...
- HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...
- [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
随机推荐
- AC日记——Aragorn's Story HDU 3966
Aragorn's Story Time Limit: 10000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- javascript中实现类似php 的var_dump
javascript语言中的调试功能少得可怜,如果涉及到第三方返回的对象数据更是使得开发程度加大.想到php中的var_dump,print_r简单好用,极大程序上方便了开发工作,在网上乱找一通,终于 ...
- Java 实现随机验证码
许多系统的注册.登录或者发布信息模块都添加的随机码功能,就是为了避免自动注册程序或者自动发布程序的使用. 验证码实际上就是随机选择一些字符以图片的形式展现在页面上,如果进行提交操作的同时需要将图片上的 ...
- 信号板拼包：数组方式（bug长度只是截短，并未清空，若之后拷贝数据长度小于之前数据长度，老数据会接在后面）
class SignalobardMsgReadHandler : public SessionVectChar::ReadHandler{public: SignalobardMsgReadHan ...
- c实现的trim函数
功能:去掉字符串首尾的空格,换行符等空白. 代码: #include <string.h> #include <stdio.h> #include <ctype.h> ...
- MySQL中limit使用动态参数的解决方法（拼接SQL字符串语句来执行SQL）
官方好像说过limit已经在5.6版本上支持了动态参数,但是测试时依然还是不行. 那么要解决limit动态参数唯一能做的就是使用字符串SQL拼接的形式,然后再进行执行. 一般有以下方式解决: 1.存储 ...
- echarts判断点击参数类型，series为有效，markPoint 无效
https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-7o3u28yh.html 可以设置如果点击的是markPoint,直接返回
- Linux下快速删除输错的密码技巧（快速删除输入的命令）
1.[Esc]+[退格键(Backspace)] 2.[Ctrl]+[U] 说明:以上两个快捷键都会删除全部输错的命令或密码. 参考: http://blog.csdn.net/u013895662/ ...
- Maven的构建生命周期理解
以下引用官方的生命周期解释https://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html: 一.构建生命 ...
- DTrace Oracle Database
http://d.hatena.ne.jp/yohei-a/20100515/1273954199 DTrace で Oracle Database のサーバー・プロセスをトレースしてみた Oracl ...