canvas绘制图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>初学html5</title>
<meta name="keywords" content="">
<meta name="description" content="">
<script src="canvas.js"></script>
</head>
<body >
<canvas id="canvas" width="500" height="350"></canvas>
</body>
</html>

js如下:

function draw(id)
{
var canvas=document.getElementById(id);
var context=canvas.getContext(‘2d‘);

context.fillStyle=‘#ccc‘;
context.fillRect(0,0,400,300);

for(var i=0;i<10;i++)
{
context.beginPath();
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.closePath();
context.fillStyle="rgba(255,0,0,0.25)";
context.fill();
context.strokeStyle="red";
context.stroke();
}

}

时间: 2024-12-28 16:46:08

canvas绘制图片的相关文章

【Canvas】如何用Canvas绘制图片

三种方式绘制图片drawImage() ①drawImage(三个参数) ②drawImage(五三个参数) ③drawImage(九个参数) 原文地址:https://www.cnblogs.com/moveup/p/9736014.html

canvas绘制图片,实现在微信里长按保存图片

做的一个微信公众号,要实现用户长按保存获得到的卡片,并且卡片上的内容是抽奖抽取到的,是动态变化的.一开始选用的一个 html2canvas.js插件,在本地调试的很好开心啊,但是在手机上运行的时候转化成图片很模糊...,然后还是自己写一个吧   点击每个卡面展示详情,这个详情可以长按保存.选择钻石黄金等等,类型不一样,卡片背景.字体的颜色都不一样 代码部分 1 var list = { 2 width: 662.4, // 卡牌宽度 3 height: 1000.224, // 卡 4 imgB

[ html drawImage 绘制图片 ] canvas绘制图片 drawImage 属性实例演示之二

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

HTML5 canvas绘制图片

demo.js window.onload=function() { createcanvas(); drawImage(); } function createcanvas() { var CANVAS=document.getElementById('mycanvas'); context=CANVAS.getContext('2d'); } function drawImage() { var img=new Image(); img.onload=function() { context

[ html drawImage createPattern ] canvas绘制图片 drawImage 属性图片平铺方式实例演示

<!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="

[ html drawImage 绘制图片 ] canvas绘制图片 drawImage 属性实例演示

<!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="

[ html createPattern 绘制背景平铺方式 ] canvas绘制图片 createPattern 绘制背景平铺方式 属性实例

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

[ html drawImage 图片预加载 ] canvas绘制图片 drawImage 属性实例演示之三--使用New Image()进行图片预加载

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

利用canvas 导出图片

使用canvas绘制图片,并将图片导出. 将不同域下图片绘制到canvas上时,不能使用toDataURL来获取imgdata,因为 canvas 使用了没有权限的跨域图片在使用canvas.toDataURL()等数据导出函数的时候会报错! img.crossOrigin = "Anonymous" ,它开启了本地的跨域允许.当然服务器存储那边也要开放相应的权限才行,如果是设置了防盗链的图片在服务端就没有相应的权限的话你本地端开启了权限也是没有用的. function downloa