html5画布基础
2024-09-27 02:39:02
canvas 元素用于在网页上绘制图形。
什么是canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建画布:
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度:
<canvas id="myCanvas" width="200" height="100"></canvas>
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
阴影:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;----阴影的模糊级别
ctx.shadowOffsetX=20;----阴影偏移像素
ctx.shadowColor="black";---阴影
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);
线条:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); ctx.beginPath();
ctx.lineWidth=10;----设置线条粗细
ctx.lineCap="round";---round(圆形的结束帽)/square(正方形结束帽)
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke();
ctx.lineJoin="round";---当两条线条交汇时,创建边角类型(round-圆角/bevel-斜角/miter-尖角)
ctx.miterLimit=5;---设置或返回最大斜接长度。
矩形:
ctx.clearRect(20,20,100,50);---清空矩形
context.quadraticCurveTo(控制点x,控制点y,结束点x,结束点y);---二次贝塞尔曲线
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);---三次贝塞尔曲线
最新文章
- QSS的应用
- 在VisualStudio 编辑器文本替换中使用正则表达式
- Label控件如何根据字符串自定义大小
- c#的逻辑运算符重载(二)
- JQuery Easy Ui dataGrid 数据表格
- 2015年九月八日---js学习总结
- [CareerCup] 4.6 Find Next Node in a BST 寻找二叉搜索树中下一个节点
- WSDL Style和use的组合方式说明
- 基础1 JavaSe基础
- Sublime搭建nodejs环境(windows)
- 深入理解inode与软硬链接
- SQL2005 安装时 “性能监视器计数器要求(错误)” 解决方案
- MVC每层的职责
- JS获得URL参数
- [技术]浅谈OI中矩阵快速幂的用法
- 【Swift 3.1】iOS开发笔记(四)
- SQL入门(3):定义约束/断言assertion/触发器trigger
- AOP的第一个小坑
- 动态修改属性设置 easyUI
- Feign status 400 reading 问题分析
热门文章
- spring boot 添加jsp支持注意事项
- 找出A字符串中出现B字符串的起始位置
- Apache+Tomcat实现负载均衡
- 用 WEKA 进行数据挖掘,第 1 部分: 简介和回归(转)
- PopupWindowAction breaking MEF import?
- 《zw版&#183;Halcon-delphi系列原创教程》 zw版-Halcon常用函数Top100中文速查手册
- Node.js中的Session,不要觉得简单哦。
- 正则提取 html 里<;input>; 标记的value 值
- ClickOnce添加自定义prerequisite
- openWrt 安装与实践 II