1、<canvas>元素
id:不是<canvas>元素专享,和标准的html标签一样,都可以为元素指定id;
width:元素宽度,默认为300px。可以通过dom和css进行设置;
height:元素高度,默认为150px。可以通过dom和css进行设置;
注:使用css设置width和height时,渲染图像会缩放适应布局,这意味着图像发生了变形,这时需要显示指定canvas的width和height属性的值。
canvas默认是全透明的,但是可以像图片一样指定样式(边距、边框、背景等),指定的样式不会对图像产生影响。
为了兼容旧版本浏览器,canvas提供了替换内容,例如:
<canvas id="stockGraph" width="150" height="150">
current stock price: $3.15 +0.15
</canvas>
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150"/>
</canvas>
2 、渲染上下文
canvas初始化是空白的,要在上面画图首先需要渲染上下文,
//通过id获取canvas元素对象
var canvas = document.getElementById('canvas_test');
//通过canvas获取上下文
//注:2d是目前唯一的选择
var context = canvas.getContext('2d');
3 、简单的例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.wraper {
position: relative;
border: 1px solid orange;
}
</style>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('test');
if(canvas.getContext){
var context = canvas.getContext('2d');
context.fillStyle = "rgba(200,0,0,1)";
context.fillRect(10,10,50,50);
context.fillStyle = "rgba(0,0,200,0.3)";
context.fillRect(30,30,70,70);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="test" width="200px" height="200px" class="wraper"></canvas>
</body>
</html>
运行后的效果:
- 大小: 846 Bytes
分享到:
相关推荐
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
html2canvas 的 @1.0.0-rc.4 版本,兼容IOS13,npm install时候安装版本不对可以直接下载这个,选择dist内的js文件引入
html2canvas-1.0.0-rc.4版本
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
canvas绘制基础图形(canvas 气泡框 网格线 三角形 圆角矩形 箭头)1.初始化画布 initCanvas * 2.绘制网格线 drawGridlines * 3.绘制圆点 drawDot * 4.绘制圆环 drawRing
Android—BitMap与Canvas学习笔记
判断浏览器是否支持canvas,具体代码如下: 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ /**判断...
Canvas,Delphi中的画布,本压缩包中包含了四个特效,我也是从网上找的教程,但教程中有点小错误,也可能是有的站长复制粘贴时不小心哈,我研究了下教程后就直接做成了程序了。喜欢的朋友拿去。。。
asp-net-mvc-canvasjs-chart-samples,.NET的MVC图表组件
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景
canvas-nest.js一个基于html5 canvas绘制的网页背景效果
现在以用canvas画一个对角线为例: 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ getCanvas(); }; //...
node-canvas, node Canvas是一个Cairo支持的NodeJS画布实现 节点画布这是版本 2.0.0 -alpha的文档Alpha版本的2.0可以使用 npm install canvas@next 安装。有关从 1.x 升级到 2. x.的指南,请参阅变更日志版本 1.x ...
Canvas的实际使用--自定义搜索效果 资源博客地址:http://blog.csdn.net/wangwo1991/article/details/77940721
Android开发者学习笔记-View、Canvas、bitmap.pdf
修改html2canvas.js源码,可以解决截图不全问题.使用方式参考 http://blog.csdn.net/q2365921/article/details/54377479
前端项目-javascript-canvas-to-blob,javascript canvas to blob是一个将画布元素转换为blob对象的函数。
可以通过Left、Top、Right、Bottom附加属性在Canvas中定位元素,通过设置Left和Right属性值表示元素最靠近的那条边,应该与Canvas的左边缘或右边缘保持一个固定的距离。 元素不能使用两个以上的Canvas属性!如果同时...
canvas-js-动画-例子