HTML5 canvas 画布的建立和描绘一些基本样式
来源:互联网 发布:个人域名 gmail 编辑:程序博客网 时间:2024/04/25 12:11
Canvas画布 :
1.建立 在body中建立canvas画布
<canvasid="canvas"width="400"height="600"style="border: 1px solid;"></canvas>
2.在JavaScript中对画布进行样式设置
1.获取画布
var canvas= document.getElementById("canvas");
2.获取画笔
var context= canvas.getContext("2d");//画布为2D效果
3.获取样式
context.strokeStyle= "#0000ff";//边框类型
context.fillStyle="#ff0000"; //填充类型
4.给画布上色(矩形)
context.strokeRect(100,100,200,100);
context.fillRect(20,20,150,100);//画布的填充位置
4.画布的集中绘画方式
A 矩形: 得到如上画笔之后
context.strokeStyle= "#0000ff";//边框颜色
context.fillStyle="#ff0000"; //填充颜色
context.strokeRect(100,100,200,100);
context.fillRect(20,20,150,100);//画布的填充位置
B 三角形
context.moveTo(500,100);//起点
context.lineTo(500,300);//连线到第二个点
context.lineTo(700,300);//连线到第三个点
context.lineTo(500,100);//连线回到起点
context.lineWidth= 3; //边框宽度
context.fill(); //三角形填充类型
context.stroke(); //三角形边框类型
C 圆形
//样式 边框颜色 0.8 透明度 //圆
context.strokeStyle= "rgba(255,0,0,0.8)";
context.beginPath();开始
//画圆的方法 arc参数入下
x y redius startAngle endAngleanticlockwise:顺时针/逆时针
//x y 为圆心的坐标
//逆时针: false 顺时针 :true
context.arc(200,200,60,0,Math.PI*2,false);
context.stroke(); //边框类型
D 图片
varimage = newImage();
image.src= "gravel.jpg";
image.onload= function(){
//显示图像绘制图片的方法drawImage 参数(图片,x,y,图片宽度,图片高度)
context.drawImage(image,100,100,170,200);
}
- HTML5 canvas 画布的建立和描绘一些基本样式
- 关于HTML5的画布canvas
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
- Canvas画布的一些实用技巧
- HTML5---Canvas(画布) 基础使用和介绍
- HTML5 1 简介和Canvas画布
- HTML5——Canvas画布的使用方法
- HTML5-Canvas画布的使用
- HTML5特性 > Canvas >画布
- 关于html5 canvas画布
- HTML5----Canvas画布
- HTML5 画布 Canvas
- html5-canvas画布
- html5画布canvas
- html5 canvas 画布基础
- html5 canvas画布居中
- HTML5 canvas画布
- HTML5(1):画布(canvas)
- 页面嵌入百度地图或iframe引入百度地图
- [笔记分享] [Git] progit学习笔记之起步
- 数组下标为什么是从0开始?
- 为什么ConcurrentHashMap是弱一致的
- MyBatis调用存储过程
- HTML5 canvas 画布的建立和描绘一些基本样式
- 处理$.ajax传递json格式参数,属性为null,undefined,“”
- 安卓源码集合
- HBase
- github使用发现优秀的开源项目
- 感冒
- 短信验证码 UI
- iptables 从放弃 到 熟悉
- QT5中的pro文件中为何要加入”QT += widgets”